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)}再相應組件中進行調用
<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>然后就可以在控制臺獲得數據了
總結
以上所述是小編給大家介紹的vue中利用Promise封裝jsonp并調取數據,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
