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 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
Move.js入门
Feb 08 Javascript
JS数组的常用10种方法详解
May 08 Javascript
React如何创建组件
Jun 27 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
常用的js方法合集
2017/03/10 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
三年大学生活自我鉴定
2014/01/21 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
JavaScript流程控制(分支)
2021/12/06 Javascript
python获取字符串中的email
2022/03/31 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android