vue中利用Promise封装jsonp并调取数据
Promise就是一个给一步操作提供的容器，在这个容器里，有两个阶段无法改变的阶段，第一个阶段就是Pending(进行)，第二个阶段就是结果阶段，包含Fulfilled(成功)、Rejected(失败)两个结果。
这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。
newPromise((resolve,reject)=>{
相应操作
if(异步操作成功){
resolve(value)
}else{
reject(error)
}
}).then(value=>{
//成功后操作
}，error=>{
//失败后操作
})
用Promise封装jsonp方法
importoriginJSONPfrom'jsonp'
//这时候Url是不带参数的，我们让data变成参数，data在具体定义获取具体内容的时候再单独配置
exportdefaultfunctionjsonp(url,data,option){
//看url是否有问号的意思就是只在第一次加参数的时候加一个问号，剩下就是加&
url+=(url.indexOf('?')<0?'?':'&')+param(data)
returnnewPromise((resolve,reject)=>{
originJSONP(url,option,(err,data)=>{
if(!err){
resolve(data)
}else{
reject(err)
}
})
})
}
//将data数据遍历，前提data是一个数组
functionparam(data){
leturl=''
for(varkindata){
letvalue=data[k]!==undefined?data[k]:''
url+=`&${k}=${encodeURIComponent(value)}`
}
//删除第一个&符号
returnurl?url.substring(1):''
}
定义一个重复比较多的配置文件config.js
exportconstcommonParams={
g_tk:5381,
inCharset:'utf-8',
outCharset:'utf-8',
notice:0,
format:'jsonp'
}
//jsonp默认的options就是jsonpCallback
exportconstoptions={
param:'jsonpCallback'
}
exportconstERR_OK=0
然后再进行获取页面方法的封装
importjsonpfrom'common/js/jsonp'
import{commonParams,options}from'./config'
exportfunctiongetRecommend(){
//获取qq音乐的地址
consturl=
'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
//object.assign()方法来合并commonParams对象和后面的对象
constdata=Object.assign({},commonParams,{
platform:'h5',
uin:0,
needNewCode:1
})
//最后返回的是
returnjsonp(url,data,options)
}
再相应组件中进行调用
然后就可以在控制台获得数据了
总结
以上所述是小编给大家介绍的vue中利用Promise封装jsonp并调取数据,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。