让 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)

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4206