vue中利用中利用Promise封装封装jsonp并调取数据并调取数据
Promise就是一个给一步操作提供的容器，在这个容器里，有两个阶段无法改变的阶段，这两个阶段在文中给大
家提到。对vue中利用Promise封装jsonp并调取数据 的相关知识感兴趣的朋友，跟随小编一起看看吧
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就是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',
评论0
最新资源