使用一个函数处理多个 Ajax 请求 - 在页面加载时返回相同的结果

Question

我正在编写一些代码，其中将有一个函数 (doAjax) 来处理对不同功能的所有请求。这在正常情况下使用时（点击按钮等）工作正常，但我试图在加载页面时调用一些东西来初始化应用程序的状态。

这是 Ajax 函数：

function doAjax(type, action, data = null){
    return new Promise(function(res,rej){
        xhr = new XMLHttpRequest();
        xhr.open(type, '/inc/functions.php?action='+action, true);
        xhr.timeout = 20000;
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (this.status === 200) {
                res(xhr);
            } else {
                console.log("some xhr error occured");
                rej("some xhr error happened");
            }
        };
        xhr.send(data); 
    });
}

这里有几个向此发送请求的函数示例：

/* get file structure of files */
function buildTree(){
     doAjax('GET', 'get_files').then(r => {
         var res = JSON.parse(r.response);
         console.log(res);
         /*
              the json is processed here and stuff 
              is displayed on the front end
         */

     }
}

/* get user data from database */
function populateShare(){
    doAjax('GET', 'social_populate').then(r => {
        var res = JSON.parse(r.response);
        console.log(res);
        /*
            again, the json received from the database is 
            processed and output to the front end
        */
    }
}

还要提一下，这些函数也绑定了点击监听器，所以在后面的应用中以及onload都会用到！

现在，问题是当我尝试在页面加载时执行这两个作为一种初始化函数（设置应用程序以供使用）。如果我运行以下：

 function init(){
     buildTree();
     populateShare();
 }
 init(); //called later

两者 console.logs 输出相同的结果 - 来自 social_populate 的 return（从 populateShare() 调用）。

所以我的问题最终是，是否有任何方法可以在 init() 函数中对函数调用进行排队，等待每个调用完成后再继续下一个调用？可能有更多函数需要在 init() 上调用，有些还涉及 Ajax 个请求。

我试过以下方法，在另一个线程中找到 - 但不幸的是 return 结果相同：

async function initialise(){
     try {
         const p1 = buildTree();
         const p2 = populateShare();
         await Promise.all([p1, p2]);
     } catch (e) {
         console.log(e);
     }
}

我知道我可以从后端和return加载整个批次在一个巨大的JSON中，但我更好奇是否可以实现上述目标！我觉得我已经进入了某种同步请求死循环，或者我在这里遗漏了一些明显的东西！

另外，请不要jQuery！

谢谢！

Answer 1

您在声明 xhr 时似乎不小心使用了全局变量，该变量在每次调用时都被覆盖。

尝试let xhr = new XMLHttpRequest();

使用一个函数处理多个 Ajax 请求 - 在页面加载时返回相同的结果

Using one function to handle multiple Ajax requests - returning same results on page load

javascript

ajax

synchronous

pageload

wait