axios扩展jsonp,不引入第三方库
2020-09-04 本文已影响0人
JuvenileAndSea
在vue中使用axios是有时候会用到jsonp前端跨域,记录下一
import axios from 'axios'
import Qs from 'qs'
/**
* jsonp跨域
* @param {String} url [请求地址]
* @param {Object} params [请求携带参数]
*/
axios.jsonp = (url, params) => {
if (!url) {
console.error('至少需要一个url参数!')
return
}
return new Promise((resolve, reject) => {
window.jsonCallBack = (result) => {
resolve(result)
}
const JSONP = document.createElement('script')
JSONP.type = 'text/javascript'
JSONP.src = `${url}${Qs.stringify(params)}&callback=jsonCallBack`
document.getElementsByTagName('head')[0].appendChild(JSONP)
setTimeout(() => {
document.getElementsByTagName('head')[0].removeChild(JSONP)
}, 500)
})
}
/**
* 接口方法
* @param {String} url [请求地址]
* @param {Object} params [请求携带参数]
*/
const getJsonp= function (url, params) {
return new Promise((resolve, reject) => {
axios
.jsonp(url, params)
.then(res => {
resolve(res)
})
.catch(error => {
reject(error)
})
})
}
// 使用
getJsonp(请求地址,请求携带参数).then(res=>{
}).catch(error => {
console.log(error )
})