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