Vue项目中使用jsonp抓取跨域数据的方法
- 下载jsonpnpminstalljsonp
- 在js文件夹下新增一个jsonp.js,来封装一个jsonp()
如何封装一个jsonp()
在下载的jsopn中，jsonp（url，options，callback）这个是原生jsonp方法中的参数；
引入下载的jsonp
importoriginJsonpfrom'jsonp'；
导出自己定义的jsonp函数
//这个jsonp函数是我们自己定义的，与上面的originJsonp不是同一个，originJsonp是一个可以直接引用的方法;她最
终返回一个Promise对象
exportdefaultfunctionjsonp(url,data,option){
returnnewPromise((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
}
exportfunctionparam(data){
leturlData='';
for(letkeyindata){
letvalue=data[k]!==undefined?data[k]:'';//用来判断data是不是空
//将data拼接起来
if(vaule){
urlData+=·'&'${k}=${encodeURIComponent(value)}·;//encodeURIComponent将进行网址的拼接(encodeURIComponent()是将字符串转换成url地址
}
}
returnurlData?urlData.substring(1):'';//url.substring(1)的原因是，有可能这个url后面接的参数用的是'？‘；我们只需要将参数用‘&'连接起来，不用管URL后面紧接的那个符号【是？还是&】
}
将函数param引用到函数jsonp中
exportdefaultfunctionjsonp(url,data,option){
returnnewPromise((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)//失败
}
})
})
}
总结
以上所述是小编给大家介绍的Vue项目中使用jsonp抓取跨域数据的方法，希望对大家有所帮助！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。