面试题——jsonp函数实现

这里将jsonp前端整体流程封装在一个函数内。

参考答案：

function jsonpFun(url, callback, errorCallback){
    let callbackName = `jsonp_${Math.floor(Math.random()*10000)}`;
    let script = document.createElement('script');
    window[callbackName] = function(data){
        callback(data);
        document.body.removeChild(script);
        delete window[callbackName];
    }
    script.onerror = function(){
        errorCallback();
        document.body.removeChild(script);
        delete window[callbackName];
    }
    script.src = `${url}?callback=${callbackName}`;
    document.body.appendChild(script);
}

注解讲解：

// errorCallback可以在函数内部写默认回调函数，作为可选函数。
function jsonpFun(url, callback, errorCallback){
    // 随机生成jsonp回调函数名称。
    let callbackName = `jsonp_${Math.floor(Math.random()*10000)}`;
    // 创建script用于插入网页执行js文件跨域请求，在函数内集成请求动作。
    let script = document.createElement('script');
    // 创建全局的jsonp回调函数，该函数会被通过script获取的服务端返回的js脚本调用，该脚本中包含了JSONP数据
    window[callbackName] = function(data){
        // 使用服务端返回的数据。
        callback(data);
        // 完成和移除本次jsonp函数的回调函数和script标签，避免内存浪费。
        document.body.removeChild(script);
        delete window[callbackName];
    }
    // 如果script标签的加载过程中出现错误，如404标志的服务端，该函数将被执行。
    script.onerror = function(){
        errorCallback();
        // 同上
        document.body.removeChild(script);
        delete window[callbackName];
    }
    // 配置具体js地址等。
    script.src = `${url}?callback=${callbackName}`;
    // 完成插入执行。
    document.body.appendChild(script);
}

理论学习参考：

【跨域的解决方法有哪些？JSONP的原理？CORS怎么使用？Nginx如何设置？-哔哩哔哩】 b23.tv/SwXgf7o

【使用 JSONP 实现跨域【JS面试题】-哔哩哔哩】 b23.tv/X27dBLO

本文章仅供参考，欢迎纠错和建议。