如何使用多个XMLHttpRequest? [英] How to use multiple XMLHttpRequest?

问题描述

我需要从8个不同的URL获取8个JSON.我将必须更改的查询字符串存储在Array中，并使用for循环遍历该字符串.这是我的代码:

I need to get 8 JSON from 8 different URL. I stored the query string that I have to change in an Array and I loop through it with a for loop. Here is my code:

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.

So far I just want to display each JSON on the console. I don't get any error but I can display only the last JSON with the last index item (noobs2ninjas).

有人可以解释我为什么吗?如何获取所需的所有JSON?

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

谢谢

推荐答案

有人可以解释我为什么吗?如何获取所需的所有JSON?

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

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

In order to send a second request you need to wait for the first to finish. Hence, if you are interested to get the responses in the array order you can loop on each array element and only when you get the response you can loop on the remaining elements:

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

相反，如果您想完全异步地(以并发方式)执行所有请求，则必须声明 request 变量并在循环内确定范围.每个数组元素一个请求.您有一些可能，例如:

Instead, if you want to execute all the request completely asynchronous (in a concurrent way), the request variable must be declared and scoped inside the loop. One request for each array element. You have some possibilities like:

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

• using let
• declaring a callback
• using IIFE
• using array .forEach() instead of a for loop

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注释，为了在调用结束时进行数学计算:

As per @Wavesailor comment, in order to make a math computation at the end of calls:

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, []);

这篇关于如何使用多个XMLHttpRequest?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！