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(二) 事件机制(1)
Nov 25 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
Vuejs实现带样式的单文件组件新方法
May 02 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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 进度条实现代码
2009/03/10 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
js计算精度问题小结
2013/04/22 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python 剪切移动文件的实现代码
2018/08/02 Python
python爬取淘宝商品销量信息
2018/11/16 Python
对Python实现累加函数的方法详解
2019/01/23 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
楼面经理岗位职责范本
2014/02/18 职场文书
经理助理岗位职责
2015/02/02 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Python开发五子棋小游戏
2022/05/02 Python