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