什么是jsonp呢？

首先，因為ajax無法跨域，然后開發(fā)者就有所思考
其次，開發(fā)者發(fā)現(xiàn)， <script>標(biāo)簽的src屬性是可以跨域的
把跨域服務(wù)器寫成 調(diào)用本地的函數(shù) ，回調(diào)數(shù)據(jù)回來不就好了？
json剛好被js支持（object）
調(diào)用跨域服務(wù)器上動態(tài)生成的js格式文件（不管是什么類型的地址，最終生成的返回值都是一段js代碼）
這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像ajax，但其實并不一樣
便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP。
傳遞一個callback參數(shù)給跨域服務(wù)端，然后跨域服務(wù)端返回數(shù)據(jù)時會將這個callback參數(shù)作為函數(shù)名來包裹住json數(shù)據(jù)即可。

具體的可以看一下這個鏈接 https://github.com/webmodules/jsonp

Installation

$ npm install jsonp

API

jsonp(url, opts, fn)  //具體的url是訪問地址， opts是配置，  fn是回調(diào)

配置一般不寫， 而回調(diào)有兩個參數(shù)err, data 具體請看代碼(應(yīng)用場景vue)

import originJSONP from 'jsonp'
//封裝一個jsonp的常規(guī)方法，參數(shù)分別是 url地址，data數(shù)據(jù)，option配置
export default function jsonp(url, data, option) {
    //利用下面的函數(shù)  生成原生`jsonp`想要的url
    //如果url末尾沒有 ? 就加上  如果有就加連接符&
    let url += ('?'.indexOf(url) < 0 ? '?' : '&') + prama(data)
    originJSONP(url, option, (err, data) => {    //返回一個promise對象封裝
        return new Promise((resolve, reject) => {
            if(!err) {
                resolve(data)
            }else {
                reject(err)
            }
        })
    })
}

//將data拼接到url里
function prama(data) {
    let url = ''
    for(let k in data) {
        //解決傳輸數(shù)據(jù)里有undefiend的問題
        let value = data[k] !== undefined ? data[k] : '' 
        //拼接  注意value需要用這個函數(shù)解碼
        url += `&$(k)=$(encodeURIComponent(value))`
        return url ? url.subString(1) : ''  //去掉第一個 “&”符號
    }
}

再來個上面的截圖

jsonp.js

接下來， 我們假設(shè)訪問的一個qq音樂的網(wǎng)站 想獲取它的數(shù)據(jù)
需要一下參數(shù)，把固定的寫到config.js里

config.js

再就可以將接口的方法寫在一個文件里

recommend.js

于是我們就可以在recommend.vue調(diào)用這個接口了

image.png

可以打印出qq音樂首頁的所有數(shù)據(jù)了！ 大功告成~

謝謝觀看~