什么是jsonp呢只嚣？
首先沮稚，因?yàn)閍jax無(wú)法跨域，然后開(kāi)發(fā)者就有所思考
其次册舞，開(kāi)發(fā)者發(fā)現(xiàn)蕴掏， <script>標(biāo)簽的src屬性是可以跨域的
把跨域服務(wù)器寫成 調(diào)用本地的函數(shù) ，回調(diào)數(shù)據(jù)回來(lái)不就好了调鲸？
json剛好被js支持（object）
調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件（不管是什么類型的地址盛杰，最終生成的返回值都是一段js代碼）
這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來(lái)非常像ajax，但其實(shí)并不一樣
便于客戶端使用數(shù)據(jù)藐石，逐漸形成了一種非正式傳輸協(xié)議即供，人們把它稱作JSONP。
傳遞一個(gè)callback參數(shù)給跨域服務(wù)端于微，然后跨域服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住json數(shù)據(jù)即可逗嫡。
具體的可以看一下這個(gè)鏈接 https://github.com/webmodules/jsonp
Installation
$ npm install jsonp
API
jsonp(url, opts, fn) //具體的url是訪問(wèn)地址， opts是配置株依， fn是回調(diào)
配置一般不寫祸穷， 而回調(diào)有兩個(gè)參數(shù)err, data 具體請(qǐng)看代碼(應(yīng)用場(chǎng)景vue)
import originJSONP from 'jsonp'
//封裝一個(gè)jsonp的常規(guī)方法，參數(shù)分別是 url地址勺三，data數(shù)據(jù)雷滚，option配置
export default function jsonp(url, data, option) {
//利用下面的函數(shù) 生成原生`jsonp`想要的url
//如果url末尾沒(méi)有 ? 就加上 如果有就加連接符&
let url += ('?'.indexOf(url) < 0 ? '?' : '&') + prama(data)
originJSONP(url, option, (err, data) => { //返回一個(gè)promise對(duì)象封裝
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的問(wèn)題
let value = data[k] !== undefined ? data[k] : ''
//拼接 注意value需要用這個(gè)函數(shù)解碼
url += `&$(k)=$(encodeURIComponent(value))`
return url ? url.subString(1) : '' //去掉第一個(gè) “&”符號(hào)
}
}
再來(lái)個(gè)上面的截圖
接下來(lái)， 我們假設(shè)訪問(wèn)的一個(gè)qq音樂(lè)的網(wǎng)站 想獲取它的數(shù)據(jù)
需要一下參數(shù)吗坚，把固定的寫到config.js里
再就可以將接口的方法寫在一個(gè)文件里
于是我們就可以在
recommend.vue調(diào)用這個(gè)接口了
可以打印出qq音樂(lè)首頁(yè)的所有數(shù)據(jù)了祈远！ 大功告成~
