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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。