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

jiezi

5 年前

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

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

引入下载的 jsonp
```
  import originJsonp from 'jsonp'；
```

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

   })
}

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

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

如何封装一个 jsonp()