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

1
  • 下载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)  //失败
           }
         })
       })
     }
    
    
    
    

你可能感兴趣的

载入中...