溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
如何封裝一個jsonp()
在下載的jsopn中，jsonp（url，options，callback）這個是原生jsonp方法中的參數(shù)；
引入下載的jsonp
import originJsonp from 'jsonp'；
導(dǎo)出自己定義的jsonp函數(shù)
//這個jsonp函數(shù)是我們自己定義的，與上面的originJsonp不是同一個，originJsonp是一個可以直接引用的方法;她最
終返回一個Promise對象
export default function jsonp(url, data, option){
return new Promise((resolve,reject)=>{
//調(diào)用originJsonp（）來抓取數(shù)據(jù)
originJsonp(url,option,(err,data)=>{ //callback是抓取數(shù)據(jù)結(jié)果
if(!err){
resolve(data)
}ese{
reject(err)
}
})
})
}
在抓取的數(shù)據(jù)URL中常常會有參數(shù)傳入，但是這些參數(shù)是對象格式，但是我們傳入到originJsonp方法中的參數(shù)是拼接到url后面的，所以不能是對象的格式，這時就需要將對象格式的參數(shù)拼接到url后面組成新的URL
類似這樣的一個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] : '' ;//用來判斷data是不是空
//將data拼接起來
if(vaule){
urlData += ·'&'${k}=${encodeURIComponent(value)}·;//encodeURIComponent將進行網(wǎng)址的拼接 (encodeURIComponent()是將字符串轉(zhuǎn)換成url地址
}
}
return urlData ? urlData.substring(1):''; //url.substring(1)的原因是，有可能這個url后面接的參數(shù)用的是'？‘；我們只需要將參數(shù)用‘&'連接起來，不用管URL后面緊接的那個符號【是？還是&】
}
將函數(shù)param引用到函數(shù)jsonp中
export default function jsonp(url, data, option) {
return new Promise((resolve,reject)=>{
//調(diào)用跨域請求函數(shù)
//對URL進行拼接,首頁需要判斷URL后面是否有“？”，如果有這需要給param(data)添加“&”，不然需要給param(data)添加“？”
url = url.indexOf('?')<0 ? '?':'&' + param(data);
originJsonp(url,option,(err,data)=>{
//這里的url就是完整的請求地址，需要包括參數(shù)
if(!err){
resolve(data) //請求成功
}else{
reject(err) //失敗
}
})
})
}
總結(jié)
以上所述是小編給大家介紹的Vue項目中使用jsonp抓取跨域數(shù)據(jù)的方法，希望對大家有所幫助！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼