在vue中使用jsonp进行跨域请求接口操作


Posted in Javascript onOctober 29, 2020

前言:

这里我们使用的是第三方插件jsonp。

github网址:https://github.com/webmodules/jsonp

1、安装

npm install jsonp -S

2、引入

一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import。

1.新建jsonp.js文件来封装原始jsonp插件

// 引入原始jsonp插件
import originJsonp from 'jsonp'
/*
 封装原jsonp插件,返回promise对象
 url: 请求地址
 data:请求的json参数
 option:其他json参数,默认直接写空对象即可
*/
export default function jsonp (url, data, option) {
 url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
 return new Promise((resolve, reject) => {
 // originJsonp中的参数说明可以到前言中的github中查看
  originJsonp(url, option, (err, data) => {
   if (!err) {
    resolve(data)
   } else {
    reject(err)
   }
  })
 })
}
/*
 封装url参数的拼接
 */
function param (data) {
 let url = ''
 for (var k in data) {
  let value = data[k] !== undefined ? data[k] : ''
  // 防止参数为中文时出现乱码,把字符串作为 URI 组件进行编码
  url += `&${k}=${encodeURIComponent(value)}`
 }
 return url ? url.substring(1) : ''
}

3、使用

可以在专门请求接口的js文件夹中新建一个getCurrentCity.js文件来跨域获取接口数据。

// 引入封装好的jsonp
import jsonp from 'common/js/jsonp.js'
// 假设这里为跨域请求当前城市的接口
export function getCurrentCity () {
 // 接口地址
 let url = 'https://api.map.baidu.com'
 // 所需参数
 let datas = {
  'qt': 'dec',
  'ie': 'utf-8',
  'oue': 1,
  'fromproduct': 'jsapi',
  'res': 'api',
  'ak': 'QWilijLzYd6pCmTrHilAeWjbG41zMiXc'
 }
 return jsonp(url, datas, {})
}

4、最后在vue组件中取到接口数据

import {getCurrentCity} from 'common/apis/getCurrentCity.js'

export default {
 methods:{
  _getCurrentCity () {
   // 在这里就可以获取到当前城市的接口数据了
    getCityCurrent().then((res) => {
     // 打印出获取到的数据
     console.log(res)
    }).catch((err) => {
     console.log(err)
    })
   }
 },
 mounted () {
   this._getCurrentCity()
 }
}

补充知识:Vue中关于axios和jsonp的封装

我就废话不多说了,大家还是直接看代码吧~

import qs from 'qs'
import axios from 'axios' 
 
 //拦截器
axios.interceptors.request.use(function (config) {
  console.log('正在发送请求哦...')//添加loading效果
  return config;
}, function (error) {
  return Promise.reject(error);
});
 
// Add a response interceptor
axios.interceptors.response.use(function (response) {
  console.log('请求成功啦...')
  return response;
}, function (error) {
  return Promise.reject(error);
}); 
 
const ajax={
	post:function(url,data={}){
		return new Promise((resolve,reject)=>{
			axios.post(url,qs.stringify(data)).then(function(res){
				resolve(res.data)
			}).catch(function(err){
				reject(err)
			})
		})
	},
	get:function(url,data={}){
		return new Promise((resolve,reject)=>{
			axios.get(url,{params:qs.stringify(data)}).then(function(res){
				resolve(res.data)
			}).catch(function(err){
				reject(err)
			})
		})
	},
}
export default ajax;

在main.js中

import ajax from './common/api/index.js'

Vue.prototype.$post=ajax.post Vue.prototype.$get=ajax.get

jsonp

import originJSONP from 'jsonp'
/*
jsonp(url,option,callbackFn)
{name:1,age:20}
www.aaa.com/? 
*/
export default function(url,data,option){
 url+=(url.indexOf('?')<0 ? '?' : '&' )+param(data);
 return new Promise(function(resolve,reject){
 originJSONP(url,option,function(err,res){
  if(!err){
   resolve(res);
  }else{
   reject(err)
  }
  })
 })
}
/*
{name='aa',age=20}
&name=aa&age=20
*/
function param(data){
 let url='';
 for(let key in data){
 let item =data[key]!==undefined ? data[key] : '';
 url+=`&${key}=${encodeURIComponent(item)}`
 }
 return url ? url:'';
 }

以上这篇在vue中使用jsonp进行跨域请求接口操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jquery常用的12个小功能
Jul 22 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 #Javascript
design vue 表格开启列排序的操作
Oct 28 #Javascript
ant design vue导航菜单与路由配置操作
Oct 28 #Javascript
JS实现多功能计算器
Oct 28 #Javascript
JS实现简单贪吃蛇小游戏
Oct 28 #Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 #Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
利用Python获取操作系统信息实例
2016/09/02 Python
python 重命名轴索引的方法
2018/11/10 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
django rest framework使用django-filter用法
2020/07/15 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
物理系毕业生自荐信
2013/11/01 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
平民服装店创业计划书
2014/01/17 职场文书
百日安全生产活动总结
2014/07/05 职场文书
晚会闭幕词
2015/01/28 职场文书
教师个人教学总结
2015/02/11 职场文书
建房合同协议书
2016/03/21 职场文书