javascript - 在一个循环中连接 XMLHTTPRequest 响应以记录所有循环何时完成

Question

json.orderItem.length == 2 , 所以 2 HTTP请求被触发。
如果我一个接一个地触发这 2 个请求(不是在循环中)，我会收到这 2 个单独的响应:

1 'productName1, partNumber2342'

2 'productName2, partNumber8789'

我想在它们返回时连接这些响应，这样，在某些时候，我可以将所有响应记录为一个字符串。
我怎样才能做到这一点？

目前我无法确定是否所有请求都已完成并因此记录最后的 String .

包裹在循环中的请求..

var f = (function(){
    var xhr = [];
    var test = '';
    for (i = 0; i < json.orderItem.length; i++){
        (function (i){
            xhr[i] = new XMLHttpRequest();
            url = '/products/byId/' + json.orderItem[i].productId;
            xhr[i].open("GET", url, true);
            xhr[i].onreadystatechange = function () {
                if (xhr[i].readyState == 4 && xhr[i].status == 200) {
                    test += JSON.parse(xhr[i].responseText).entry[0].name + ', ' + JSON.parse(xhr[i].responseText).entry[0].partNumber;
                }
            };
            xhr[i].send();
        })(i);
    }
})();

Answer 1

使用 javascript 闭包:

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.

取自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

闭包是 Javascript 中一个非常强大的概念，所以如果您不熟悉它们，我建议您去读一读它。

现在我们如何使用它来解决您的问题？

var f = (function() {
    // scope a
    var xhr = [],
        successfulRequests = 0,
        responseString = "";

    for (i = 0; i < json.orderItem.length; i++){
        (function (i) {
            xhr[i] = new XMLHttpRequest();
            url = '/products/byId/' + json.orderItem[i].productId;
            xhr[i].open("GET", url, true);
            xhr[i].onreadystatechange = function () {
                if (xhr[i].readyState == 4 && xhr[i].status == 200) {
                    // scope b

                    // track successful requests here
                    successfulRequests++;                   // "remembered" through closure
                    responseString += xhr[i].responseText;  // "remembered" through closure

                    if(successfulRequests == json.orderItem.length) {
                        console.log(responseString);
                    }
                }
            };
            xhr[i].send();
        })(i);
    }
})();

在 scopeA 中声明的变量通过闭包被记住在 scopeB 中。

注意:此实现只会在所有请求成功完成后记录 responseString。您希望如何处理请求失败取决于您，但希望您现在应该知道如何处理。