javascript – 如何使用多个XMLHttpRequest？

我需要从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.我没有收到任何错误,但我只能显示最后一个带有最后一个索引项的JSON(noobs2ninjas).

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

谢谢

解决方法:

Could anybody explain me why? how do I get the all JSON that I need?

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

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);

相反,如果要完全异步(以并发方式)执行所有请求,则必须在循环内声明和限定请求变量.每个数组元素一个请求.你有一些可能性：

>使用let
>宣布回调
>使用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();
}