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

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>

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