01.在vue中通过 JSONP 方式来跨域

 1 //1.引入 : 在main.js 中引入该文件即可
 2 //2.使用: axios.jsonp('地址').then(res => { 
 3 //             console.log(res)
 4 //           }
 5     
 6 
 7 import axios from 'axios'
 8 
 9 axios.jsonp = (url, params) => {
10   // 1 根据 url 和params 拼接请求地址
11   url += '?'
12   for (let k in params) {
13     url += k + '=' + params[k] + '&'
14   }
15   // 2 拼接 callback
16   const callbackName = 'itcast_' + (new Date() - 0)
17   url += 'callback=' + callbackName
18   // 3 动态创建script标签
19   const script = document.createElement('script')
20   script.src = url
21   document.head.appendChild(script)
22   return new Promise((resolve, reject) => {
23     // 给window添加一个函数,就相当于全局函数
24     window[callbackName] = function (data) {
25       // data 就是 JSONP接口返回的数据
26       // 调用resolve获取数据
27       resolve(data)
28       // 删除掉添加给window的属性
29       delete window[callbackName]
30       // 移除 script 标签
31       document.head.removeChild(script)
32     }
33   })
34 }            

 

posted @ 2019-04-09 18:27  fiveNuts  阅读(751)  评论(0编辑  收藏  举报