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 相关文章推荐
jquery CSS选择器笔记
Mar 29 Javascript
asm.js使用示例代码
Nov 28 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
php实现的双色球算法示例
2017/06/20 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript新手语法小结
2008/06/15 Javascript
javascript工具库代码
2012/03/29 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
python中的格式化输出用法总结
2016/07/28 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python自定义线程类简单示例
2018/03/23 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
团队精神演讲稿
2013/12/31 职场文书
高中军训感言800字
2014/03/05 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL