美文网首页
JS 封装 jsonp

JS 封装 jsonp

作者: Cherry丶小丸子 | 来源:发表于2023-04-24 12:40 被阅读0次
/**
 * 封装 jsonp
 */
function jsonPRequest(url, params){
    return new Promise(resolve => {
        // 随机生成一个函数名
        const funcName = `__callback__${Math.random().toString(36).slice(2)}__${Date.now()}`;
        // 设置为全局函数
        window[funcName] = function(resp){
            resolve(resp);
        };
        // 创建一个 script 标签
        const script = document.createElement('script');
        // 多个参数进行拼接
        let paramStr = '';
        for (var arr in params) {
            paramStr += '&' + arr + '=' + params[arr];
        }
        // 给 script 中的 src 属性赋值
        script.src = url + '?callback=' + funcName + paramStr;
        // 插入到 body 中
        document.body.appendChild(script);
        // 等 script 标签加载完之后,清除标签和全局函数
        script.onload = function() {
            document.body.removeChild(script);
            delete window[funcName];
        }
    });
}

// 调用
jsonPRequest('http://localhost:9527/jsonp', {
    a: 1,
    b: 2,
    c: 3
}).then(resp => {
    console.log('promise 完成:', resp);
})

相关文章

网友评论

      本文标题:JS 封装 jsonp

      本文链接:https://www.haomeiwen.com/subject/yeyujdtx.html