javascript - 如何使用 XMLHttpRequest() 正确循环 HTTP 请求？

Question

我目前正在学习 vanilla JS，然后再进入任何主要框架，这样我就可以掌握 HTTP 请求机制。我确信有很多更好的 JS 库用于 HTTP 请求，但我想弄清楚如何使用经典的 XMLHttpRequest() 解决我的问题，因此请不要建议任何不包含 XMLHttpRequest() 的解决方案。

我试图循环遍历我拥有的数组，并使用数组中的信息向 API 发出 HTTP GET 请求，然后使用响应数据填充我的 HTML。代码很简单:

接受我的数字数组的函数:

function loadUniqueProjs(uniqueArray)
{

    var reqObject = [];

    for (var i in unique_array) 
    {
         outsideLoopRequest(unique_array[i], reqObject, i);
    }


}

我循环遍历数组并执行一个应该执行我的 GET 请求的函数:

function outsideLoopRequest(arrayValue,reqObject, i){

    // Create XHR Object
    reqObject[i] = new XMLHttpRequest();
    reqObject[i].open('GET', 'http://localhost:3000/resource/Projects/' + arrayValue, true)

    reqObject[i].onload = function() {
        if (this.status == 200) {
            var client = JSON.parse(this.responseText);
            var output = '';

            for (var j in client){

                output +=   '<div class="card">'+
                                    '<h5 class="card-header" role="tab" id="heading'+ j + '">'+
                                        '<a data-toggle="collapse" data-parent="#accordion" style="color:black"' + 
                                            'href="#collapse' + j + '"aria-expanded="false" aria-controls="collapse' + j + '"class="d-block collapsed">' +
                                            '<i class="fa fa-angle-double-down pull-right"></i>#' +
                                            client[j].projectTitle + ' | ' + 'PM: ' + client[j].projectManager + ' | ' +
                                            'PO: ' + client[j].projectOwner + ' | ' + 'Estimated Deadline: ' + client[j].predictedCompletion +
                                            ' | ' + 'Status: ' + client[j].status +
                                            ' | ' + 'Requestor: ' + client[j].requestor +
                                        '</a>'+
                                    '</h5>'+
                            '</div>';
            }
    }

    document.getElementById("spinner").hidden = true;
    // output the data into the HTML page
    document.getElementById('accordion').innerHTML = output;

    console.log(this.status + ' Data retrieved successfully!');

}
    reqObject[i].send();
}

经过几个小时的逐步调试，我了解到 HTTP 请求是异步的，当利用循环逐个执行请求时，它们的行为不会像您希望的那样。这些请求不会一一添加我需要的 HTML 来执行，而是循环首先打开所有请求，然后在请求到来时执行，当在 Web 调试器中单步执行代码时，代码会在各处跳转，这会变得非常困惑(抱歉咆哮)。

我希望它能够一步一步地表现。我对 SO 进行了研究，有人建议这些是范围问题，并且请求应该在单独的函数中发出，这就是为什么我用一个函数中的循环和另一个函数中的请求执行来构造我的代码，但它的行为仍然错误前面已经描述过。有没有人可以分享一下他们的专业知识？

Answer 1

1. 在 XMLHttpRequest 完成后执行某些操作的唯一方法是将“某些内容”作为回调传递。对于请求链，您必须递归地执行此操作，因此第一个请求必须接收要执行的所有请求的有序列表，以及最后一个请求完成后要执行的完成回调。代码可能会变得很难看，我不会尝试。

2. 您仍然可以立即发送所有请求，并按数据到来时的正确顺序呈现数据。从创建输出数据的基本骨架结构开始

var outputStructure = '';

for (var i in unique_array) {
   var cardId = 'card-' + id;
   outputStructure += `<div class="card" id="card-${i}">`;
   outsideLoopRequest(unique_array[i], reqObject, i);
}

document.getElementById('accordion').innerHTML = outputStructure;

完成后，将数据放入具有正确 ID 的卡中。

    reqObject[i].onload = function() {
// create the output structure, then
       document.getElementById(`card-${i}`).innerHTML = output;

此类问题是俗称的“回调 hell ”的一部分。使用 Promise 来组织更复杂的异步操作(有些事情可以并行完成，其他事情必须等到前一个完成)要容易得多。完成所有请求后再做事情吗？一行:Promise.all(requests).then(//....

使用获取。