JavaScriptvue

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 )
})
上一篇下一篇

猜你喜欢

热点阅读