JQuery如何将AJAX请求响应结果存入全局变量

核心原因 #

AJAX默认是异步执行的，你调用receiveUserId函数后，代码不会等AJAX请求返回结果就会继续往下执行alert(user_ID)这类后续逻辑，此时success回调还没触发，全局变量user_ID还没被赋值，所以读出来是undefined。而success回调是请求成功后才会触发，此时已经完成了全局变量赋值，所以内部打印是正常的。

解决方案 #

方案1：将AJAX改为同步请求（不推荐，会阻塞页面） #

在$.ajax的配置里加async: false参数，强制让代码等AJAX请求完成再往下走，适合临时调试的特殊场景：

var user_ID;  // 全局变量
function receiveUserId(layerURL) {
    $.ajax({
        url: layerURL,
        crossDomain: true,
        type:"GET",
        async: false, // 新增同步配置
        success: function(result){
            user_ID = result.user_ID;
            console.log("内部打印user_ID：", user_ID)
        }
    });
}
// 调用函数后再读全局变量就能拿到值
receiveUserId('你的接口地址');
alert(user_ID);

注意：同步请求会阻塞浏览器渲染和用户交互，直到请求完成才会恢复，用户体验很差，生产环境不建议使用。

方案2：使用回调函数处理后续逻辑（推荐，兼容性好） #

把所有需要用到user_ID的逻辑封装成回调函数，放到success回调里执行，不需要依赖全局变量的时序也能稳定拿到值：

var user_ID; // 全局变量
function receiveUserId(layerURL, callback) {
    $.ajax({
        url: layerURL,
        crossDomain: true,
        type:"GET",
        success: function(result){
            user_ID = result.user_ID;
            console.log("内部打印user_ID：", user_ID)
            // 执行传入的回调，把user_ID传出去
            callback && callback(user_ID);
        }
    });
}
// 调用时传入需要执行的后续逻辑
receiveUserId('你的接口地址', function(user_ID) {
    // 这里的代码会等请求完成后执行，能正常拿到user_ID
    alert(user_ID);
    // 其他用到user_ID的逻辑都可以写在这里
});

方案3：使用Promise + async/await写法（现代项目常用） #

把AJAX封装成Promise，用async/await语法实现同步写法的效果，同时不会阻塞页面：

var user_ID; // 全局变量
function receiveUserId(layerURL) {
    // 返回Promise对象
    return new Promise((resolve, reject) => {
        $.ajax({
            url: layerURL,
            crossDomain: true,
            type:"GET",
            success: function(result){
                user_ID = result.user_ID;
                console.log("内部打印user_ID：", user_ID)
                resolve(user_ID);
            },
            error: reject
        });
    })
}
// 调用时用async/await等待请求完成
async function execLogic() {
    await receiveUserId('你的接口地址');
    // 等待请求完成后再读全局变量就能拿到值
    alert(user_ID);
}
execLogic();

内容的提问来源于stack exchange，提问作者taylort139