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',
    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>

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

• 还没有人评论，欢迎说说您的想法！

相关课程

CSS3样式设计

4786 0元 限免

Web前端入门教程

5873 9.8元

jQuery前端框架

5438 0元 限免