网络编程 
首页 > 网络编程 > 浏览文章

vue中利用Promise封装jsonp并调取数据

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功)、Rejected(失败)两个结果。

这两个结果不会改变。然后结果结束后就会用then来执行相应的结果。

new Promise((resolve,reject)=>{
 相应操作
 if(异步操作成功){
  resolve(value)
 }else{
  reject(error)
 }
}).then(value=>{
 // 成功后操作
},error=>{
 // 失败后操作   
})

用Promise封装jsonp方法

import originJSONP from 'jsonp'
// 这时候Url是不带参数的,我们让data变成参数,data在具体定义获取具体内容的时候再单独配置
export default function jsonp(url, data, option) {
 // 看url是否有问号的意思就是只在第一次加参数的时候加一个问号,剩下就是加&
 url += (url.indexOf('"htmlcode">
export const commonParams = {
 g_tk: 5381,
 inCharset: 'utf-8',
 outCharset: 'utf-8',
 notice: 0,
 format: 'jsonp'
}

// jsonp默认的options就是jsonpCallback
export const options = {
 param: 'jsonpCallback'
}
export const ERR_OK = 0

然后再进行获取页面方法的封装

import jsonp from 'common/js/jsonp'
import { commonParams, options } from './config'
export function getRecommend() {
 // 获取qq音乐的地址
 const url =
  'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
 // object.assign()方法来合并commonParams对象和后面的对象
 const data = Object.assign({}, commonParams, {
  platform: 'h5',
  uin: 0,
  needNewCode: 1
 })
 // 最后返回的是
 return jsonp(url, data, options)
}

再相应组件中进行调用

<script>
import { getRecommend } from 'api/recommend'
import { ERR_OK } from 'api/config'
export default {
 created() {
  this._getRecommend()
 },
 methods: {
  _getRecommend() {
   getRecommend().then(res => {
    if (res.code === ERR_OK) {
     console.log(res.data.slider)
    }
   })
  }
 }
}
</script>

然后就可以在控制台获得数据了

总结

以上所述是小编给大家介绍的vue中利用Promise封装jsonp并调取数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:利用js-cookie实现前端设置缓存数据定时失效
下一篇:实用Javascript调试技巧分享(小结)
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap