Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法
- 下載jsonp npm install jsonp
- 在js文件夾下新增一個(gè)jsonp.js,來(lái)封裝一個(gè)jsonp()
如何封裝一個(gè)jsonp()
在下載的jsopn中，jsonp（url，options，callback）這個(gè)是原生jsonp方法中的參數(shù)；
引入下載的jsonp
import originJsonp from 'jsonp'；
導(dǎo)出自己定義的jsonp函數(shù)
//這個(gè)jsonp函數(shù)是我們自己定義的，與上面的originJsonp不是同一個(gè)，originJsonp是一個(gè)可以直接引用的方法;她最
終返回一個(gè)Promise對(duì)象
export default function jsonp(url, data, option){
return new Promise((resolve,reject)=>{
//調(diào)用originJsonp（）來(lái)抓取數(shù)據(jù)
originJsonp(url,option,(err,data)=>{ //callback是抓取數(shù)據(jù)結(jié)果
if(!err){
resolve(data)
}ese{
reject(err)
}
})
})
}
在抓取的數(shù)據(jù)URL中常常會(huì)有參數(shù)傳入，但是這些參數(shù)是對(duì)象格式，但是我們傳入到originJsonp方法中的參數(shù)是拼接到url后面的，所以不能是對(duì)象的格式，這時(shí)就需要將對(duì)象格式的參數(shù)拼接到url后面組成新的URL
類(lèi)似這樣的一個(gè)url：( https://www.baidu.com/s?ie=ut... ；
這里參數(shù)data：{
ie:utf-8,
rsv_bp:1
}
export function param(data){
let urlData='';
for(let key in data){
let value = data[k] !== undefined ? data[k] : '' ;//用來(lái)判斷data是不是空
//將data拼接起來(lái)
if(vaule){
urlData += ·'&'${k}=${encodeURIComponent(value)}·;//encodeURIComponent將進(jìn)行網(wǎng)址的拼接 (encodeURIComponent()是將字符串轉(zhuǎn)換成url地址
}
}
return urlData ? urlData.substring(1):''; //url.substring(1)的原因是，有可能這個(gè)url后面接的參數(shù)用的是'？‘；我們只需要將參數(shù)用‘&'連接起來(lái)，不用管URL后面緊接的那個(gè)符號(hào)【是？還是&】
}
將函數(shù)param引用到函數(shù)jsonp中
export default function jsonp(url, data, option) {
return new Promise((resolve,reject)=>{
//調(diào)用跨域請(qǐng)求函數(shù)
//對(duì)URL進(jìn)行拼接,首頁(yè)需要判斷URL后面是否有“？”，如果有這需要給param(data)添加“&”，不然需要給param(data)添加“？”
url = url.indexOf('?')<0 ? '?':'&' + param(data);
originJsonp(url,option,(err,data)=>{
//這里的url就是完整的請(qǐng)求地址，需要包括參數(shù)
if(!err){
resolve(data) //請(qǐng)求成功
}else{
reject(err) //失敗
}
})
})
}
總結(jié)
以上所述是小編給大家介紹的Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法，希望對(duì)大家有所幫助！
相關(guān)文章
Vue實(shí)現(xiàn)購(gòu)物車(chē)實(shí)例代碼兩則
這篇文章主要介紹了Vue實(shí)現(xiàn)購(gòu)物車(chē)實(shí)例代碼,需要的朋友可以參考下2020-05-05
Vue3視頻播放器組件Vue3-video-play新手入門(mén)教程
這篇文章主要給大家介紹了關(guān)于Vue3視頻播放器組件Vue3-video-play新手入門(mén)教程的相關(guān)資料,本文實(shí)例為大家分享了vue-video-player視頻播放器的使用配置,供大家參考,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法
本篇文章主要介紹了vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Element Dialog對(duì)話框的使用示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue中$forceUpdate()的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Bootstrap+Vue滑動(dòng)監(jiān)聽(tīng)Scrollspy實(shí)現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動(dòng)監(jiān)聽(tīng)Scrollspy實(shí)現(xiàn)餐廳餐品展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了基于elementUI豎向表格、和并列的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要給大家介紹了關(guān)于Vue使用Three.js加載glTF模型的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue中使用heatmapjs的示例代碼（結(jié)合百度地圖）
這篇文章主要介紹了vue中使用heatmapjs的示例代碼（結(jié)合百度地圖），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09