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

36次阅读

共计 1341 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0