Vue項目中使用jsonp抓取跨域數據的方法

更新時間：2019年11月10日 10:22:05 作者：素素

這篇文章主要介紹了Vue項目中使用jsonp抓取跨域數據的方法，本文通過實例代碼講解的非常詳細,需要的朋友可以參考下

下載jsonp npm install jsonp
在js文件夾下新增一個jsonp.js,來封裝一個jsonp()

如何封裝一個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抓取跨域數據的方法，希望對大家有所幫助！

您可能感興趣的文章: