如何使用多个 XMLHttpRequest？

Question

我需要从 8 个不同的 URL 获取 8 个 JSON。我将必须更改的查询字符串存储在数组中，然后使用 for 循环遍历它。这是我的代码：

 var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var request = new XMLHttpRequest();

for (var i = 0; i < index.length; i++) {

    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onload = function() {
        var data = JSON.parse(request.responseText);
        console.log(data);
    }
    request.send();
}

到目前为止，我只想在控制台上显示每个 JSON。我没有收到任何错误，但我只能显示带有最后一个索引项 (noobs2ninjas) 的最后一个 JSON。

谁能解释我为什么？我如何获得我需要的所有 JSON？

谢谢

原文由 Dema 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

谁能解释我为什么？我如何获得我需要的所有 JSON？

为了发送第二个请求，您需要等待第一个请求完成。因此，如果您有兴趣以数组顺序获得响应，您可以在每个数组元素上循环，并且只有当您获得响应时，您才能在其余元素上循环：

 var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
(function loop(i, length) {
    if (i>= length) {
        return;
    }
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + i + ' id: ' + data._id);
            loop(i + 1, length);
        }
    }
    request.send();
})(0, index.length);

相反，如果您想完全异步执行所有请求（以并发方式），则必须在循环内声明 请求 变量并确定其作用域。每个数组元素一个 请求。您有一些可能性，例如：

• 使用 让
• 声明回调
• 使用 IIFE
• 使用数组 .forEach() 而不是 for 循环

 var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0; i < index.length; i++) {

    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    let request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + data._id);
        }
    }
    request.send();
}

根据@Wavesailor 的评论，为了在通话结束时进行数学计算：

 var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
(function loop(i, length, resultArr) {
    if (i>= length) {
        console.log('Finished: ---->' + JSON.stringify(resultArr));
        return;
    }
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + i + ' id: ' + data._id);
            resultArr.push(data._id);
            loop(i + 1, length, resultArr);
        }
    }
    request.send();
})(0, index.length, []);

原文由 gaetanoM 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

问题是你声明

var request = new XMLHttpRequest();

在 for 循环之外。所以你只实例一个请求。

您必须将它包含 在 for 循环中。

另外，不要忘记 ajax 是 异步 执行的，因此您将以 随机 顺序获得结果。

i 变量的值必须使用 let 关键字声明才能声明 块范围 局部变量。

let 允许您声明在 块 范围 内受限的变量。

let 始终用作 闭包 的解决方案。

此外，您可以使用 array 来存储 XMLHttpRequest 。

 var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
requests=new Array(index.length);
for (let i = 0; i < index.length; i++) {
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];
    requests[i] = new XMLHttpRequest();
    requests[i].open("GET", url);
    requests[i].onload = function() {
        var data = JSON.parse(requests[i].responseText);
        console.log(data);
    }
    requests[i].send();
}

原文由 Mihai Alexandru-Ionut 发布，翻译遵循 CC BY-SA 3.0 许可协议