axios扩展jsonp，不引入第三方库

在vue中使用axios是有时候会用到jsonp前端跨域，记录下一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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 )
})