在vue中使用jsonp进行跨域请求接口操作
版权申诉
11 浏览量
2021-01-18
18:12:42
上传
评论
收藏 48KB PDF 举报
在在vue中使用中使用jsonp进行跨域请求接口操作进行跨域请求接口操作
前言：前言：
这里我们使用的是第三方插件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, {})
}
评论0
最新资源