共计 1341 个字符,预计需要花费 4 分钟才能阅读完成。
- 下载 jsonp npm install jsonp
- 在 js 文件夹下新增一个 jsonp.js, 来封装一个 jsonp()
如何封装一个 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) // 失败 } }) }) }
正文完
发表至: javascript
2019-11-09