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音乐数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!