在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 相关文章推荐
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
ant design charts 获取后端接口数据展示
May 25 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
php中取得URL的根域名的代码
2011/03/23 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
学习python (1)
2006/10/31 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
numpy数组拼接简单示例
2017/12/15 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
数据员岗位职责
2013/11/19 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
2015年酒店工作总结
2015/04/28 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python