Vue项目中使用jsonp抓取跨域数据

• 下载jsonp npm install jsonp
• 在js文件夹下新增一个jsonp.js,来封装一个jsonp()

如何封装一个jsonp()

在下载的jsopn中，jsonp（url，options，callback）这个是原生jsonp方法中的参数；

1. 引入下载的jsonp

     import originJsonp from 'jsonp'；

2. 导出自己定义的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)
           }
        })
   
      })
   } 
   

3. 在抓取的数据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后面紧接的那个符号【是？还是&】
   }
   
   

4. 将函数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)  //失败
          }
        })
      })
    }