【HAVENT原创】让 axios 支持 jsonp

因为不想让再引用新的第三方组件了，所以执念了一下，于是搜索到了下面的代码

//axios本版本不支持jsonp 自己拓展一个
axios.jsonp = (url) => {
    if(!url){
        console.error('Axios.JSONP 至少需要一个url参数!')
        return;
    }
    return new Promise((resolve,reject) => {
        window.jsonCallBack =(result) => {
            resolve(result)
        }
        var JSONP=document.createElement("script");
        JSONP.type="text/javascript";
        JSONP.src=`${url}&callback=jsonCallBack`;
        document.getElementsByTagName("head")[0].appendChild(JSONP);
        setTimeout(() => {
            document.getElementsByTagName("head")[0].removeChild(JSONP)
        },500)
    })
}

调试了一下，发现确实能用，但是存在一个缺陷，就是如果存在连续多次的请求，都会回调到同一个函数上，这样会导致获取异步结果的时候只返回了最后一次的结果，于是乎调整了一下函数，保证每次都是命中自己对应的方法，写的比较简单，因为我的 index 不会重复，所以我没做其他校验了，如果需要保证请求的唯一性，请将 index 参数设置为唯一值（比如时间戳 + 3位的随机数）

import axios from 'axios'
import es6Promise from 'es6-promise'


// HH: 扩展 axios，让 axios 支持 jsonp
axios.jsonp = (url, index) => {
    if (!url) {
        console.error('Axios.JSONP 至少需要一个url参数!')
        return;
    }

    let callbackName = 'jsonCallBack' + index;
    return new Promise((resolve, reject) => {
        let JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = `${url}&jsonpCall=${callbackName}`;
        document.getElementsByTagName("head")[0].appendChild(JSONP);

        window[callbackName] = (res) => {
            resolve(res)
        }

        setTimeout(() => {
            document.getElementsByTagName("head")[0].removeChild(JSONP)
        }, 500)
    })
}


export const jsonp = (url, index) => axios.jsonp(url, index)

来源：oschina

链接：https://my.oschina.net/u/943746/blog/3074454

标签

jsonp

ios

axios