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


Posted in Javascript onNovember 10, 2019
  • 下载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) //失败
    }
   })
  })
 }

总结

以上所述是小编给大家介绍的Vue项目中使用jsonp抓取跨域数据的方法,希望对大家有所帮助!

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
Javascript实现的分页函数
Feb 07 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
javascript中var的重要性分析
Feb 11 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
webpack4 optimization使用总结
Nov 10 #Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 #Javascript
node后端服务保活的实现
Nov 10 #Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 #Javascript
vue父子组件的通信方法(实例详解)
Nov 10 #Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 #Javascript
vue-父子组件和ref实例详解
Nov 10 #Javascript
You might like
php生成html文件方法总结
2014/12/01 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python实现俄罗斯方块
2018/06/26 Python
python爬虫之自制英汉字典
2019/06/24 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
自我评价200字分享
2013/12/17 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
网络宣传方案
2014/03/15 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
Java 死锁解决方案
2022/05/11 Java/Android