Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法

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

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

下載jsonp npm install jsonp
在js文件夾下新增一個(gè)jsonp.js,來封裝一個(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（）來抓取數(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

類似這樣的一個(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] : '' ;//用來判斷data是不是空
 //將data拼接起來
 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ù)用‘&'連接起來，不用管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)行拼接,首頁需要判斷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ì)大家有所幫助！

您可能感興趣的文章: