jsonp的原理介紹及Promise封裝

什麼叫jsonp?

jsonp是json with padding（填充式json或參數式json）的簡寫，是經過ajax請求跨域接口，獲取數據的新實現方式

jsonp的實現原理：

動態建立script標籤，由於script標籤是沒有同源策略限制，能夠跨域的。 把script標籤的src指向正式服務端地址，這個地址跟個參數callback=xxx, 服務端在返回數據時，在xxx裏包裹一個方法（裏面是返回的數據），至關於在前端執行xxx這個方法，可是瀏覽器並無這個方法，因此在發送請求以前在window註冊這個方法，這樣的話至關於在前端執行window.xxx()這個方法去獲取數據。 具體看接下來的實現！

https://github.com/webmodules...
這個是jsonp庫的具體實現，建議下載來研究一下，最好本身動手寫一遍。本文主要是Promise封裝，因此就不具體介紹jsonp的具體實現

步驟一：

首先安裝這個庫，由於我是在node npm環境下開發，因此

$ npm install jsonp

參數介紹
jsonp(url, opts, fn)
url (String) 服務器端數據接口地址
opts (Object) 通常只需關注param便可

• param (String) 默認是callback,這是與後端約定的參數名稱，也能夠隨便定義，只要先後端統一

• timeout (Number) 請求超時時間，默認是6000ms

• prefix (String) callback值的前綴，默認是__jp

• name (String) 指定全局註冊的回調方法名，通常不會用到，由於默認是prefix+自增數字

fn 回調方法，用es6 Promise

步驟二：

下面是具體用法：
建一個名叫jsonp.js的文件
先引入jsonp庫文件

import originJSONP from 'jsonp'

對外暴露方法 url:請求服務器地址，data:參數

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

定義一個將Object的參數處理成爲 url掛載參數的形式 的函數

export 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) : ''
}

到這裏 這個Promise 就封裝好了，接下來就具體調用來獲取數據

步驟三：

建一個js文件，名字本身定義
引入前面封裝的jsonp.js

import jsonp from '../common/js/jsonp.js'

定義參數

const commonParams = {
    g_tk:1319877694,
    inCharset:'utf-8',
    outCharset:'utf-8',
    notice:0,
    format:'jsonp'
};

定義先後端統一參數

const options = {
    param:'jsonpCallback'
};

定義獲取數據函數 這裏我是拿QQ音樂的數據https://m.y.qq.com/（感謝QQ音樂的接口支持）

export function getDataFunc() { 
    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)
}

到此，我們就完成用jsonp庫進行Promise封裝，並獲取數據的過程！ 感謝閱讀！