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

前端  /  管理员 发布于 4年前   384

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('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => {  originJSONP(url, option, (err, data) => {   if (!err) {    resolve(data)   } else {    reject(err)   }  }) })}// 将data数据遍历，前提data是一个数组function param(data) { let url = '' for (var k in data) {  let value = data[k] !== undefined ? data[k] : ''  url += `&${k} = ${encodeURIComponent(value)}` } //删除第一个&符号 return url ? url.substring(1) : ''}

定义一个重复比较多的配置文件config.js

export const commonParams = { g_tk: 5381, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, format: 'jsonp'}// jsonp默认的options就是jsonpCallbackexport 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)}

再相应组件中进行调用

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

总结

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

您可能感兴趣的文章:

• Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2（char 1）
• protobuf与json转换小结
• Asp.NetCore1.1版本去掉project.json后如何打包生成跨平台包
• ASP.NET Core Project.json文件（5）
• 通过Java来测试JSON和Protocol Buffer的传输文件大小
• javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
• JsonProperty 的使用方法详解