jsonp的使用——qq音樂爲例

上一篇中對jsonp的源碼進行了分析，所以這篇文章是對jsonp的使用，加深對jsonp的理解。首次使用，如有錯誤，請告知。互相學習，互相借鑑。

因爲我最近在看慕課網上的用vue實現音樂app的教程，所以這裏我也會使用vue來實現。

安裝jsonp

$ npm install jsonp

引入jsonp

import originJSONP from 'jsonp'

定義一個實現jsonp的函數

//jsonp.js
export default function jsonp(url, opts, fn) {
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    return new Promise ((resolve, reject) => {
        originJSONP(url, option, (data, err) => {  
            if(!err) {
                resolve(data)
            } else {
                reject(err)
            }
        })
    })
}

function param (data) {
    let url = ''
    for(let i in data){
        const value = data[i] !== undefinted ? data[i] : ''
        url += `&${i} = ${encodeURIComponent(value)} `
     }
    return url ? url.substring(1) : ''
}

//newJsonp.js
import jsonp from 'common/js/jsonp'
import {commonParams,options} from './config'
export default function newJsonp() {
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

    const data = Object.assign({}, commonParams, {
       platform: 'h5',
       uin: 0,
       needNewCode: 1
  }) 
    return jsonp(url, data, options)
}

//config.js
export const commonParams = {
  g_tk: 1928093487,
  inCharset: 'utf-8',
  outCharset: 'utf-8',
  notice: 0,
  format: 'jsonp'
}

export const options = {
   param: 'jsonpCallback'
}

代碼全部來自教程之中，我只是自己重新碼了一次，加深記憶的同時加深對jsonp的理解。