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>

然后就可以在控制台獲得數據了