vue使用jsonp抓取qq音乐数据的方法
1、安装jsonp
npminstalljsonp
2、创建jsonp.js文件，内容如下：
importoriginJSONPfrom'jsonp'
/***封装jsonp
*@param{*}url原始的jsonp第一个参数是url，第二个参数是option，这里为了比较好写参数做了下封装
*@param{obj}data参数
*@param{*}optionjsonp的option
*/
exportdefaultfunctionjsonp(url,data,option){
//如果url没有？就加一个？拼接
url+=(url.indexOf('?')<0?'?':'&')+param(data)
returnnewPromise((resolve,reject)=>{
//原始jsonp的三个参数，url、option、回调函数
originJSONP(url,option,(err,data)=>{
//类似node的设计，如果err是null，表示成功，data是后端返回的数据
if(!err){
resolve(data)
}else{
reject(err)
}
})
})
}
exportfunctionparam(data){
leturl=''
for(varkindata){
letvalue=data[k]!==undefined?data[k]:''
url+='&'+k+'='+encodeURIComponent(value)
}
returnurl?url.substring(1):''
}
3、创建confiig.js文件，内容如下：
//用于存放公共数据
exportconstcommonParams={
g_tk:5381,
format:'json',
inCharset:'utf-8',
outCharset:'utf-8',
notice:0
}
exportconstoptions={
param:'jsonpCallback'
}
exportconstERR_OK=0
3、创建recommend.js文件，内容如下：
importjsonpfrom'./jsonp'
import{commonParams,options}from'./config'
exportfunctiongetRecommend(){
consturl='https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
constdata=Object.assign({},commonParams,{
platform:'h5',uin:0,needNewCode:1
})
//这里返回一个promise对象
returnjsonp(url,data,options)
}
4、在组件中使用,如musicHall.vue中
5、总结
- Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）
- Object.assign(target,source1,source2)
- encodeURIComponent(URIstring)函数可把字符串作为URI组件进行编码。URIstring必需。一个字符串，含有URI组件或其他要编码的文本。
- substring()方法用于提取字符串中介于两个指定下标之间的字符。
- stringObject.substring(start,stop)包括start处的字符，但不包括stop处的字符。不接受负的参数。
总结
以上所述是小编给大家介绍的vue使用jsonp抓取qq音乐数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！