如何使用多个 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？

谢谢

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

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

• 用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(); } 

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

Answer 2

问题是你申报了

var request = new XMLHttpRequest();

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

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

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

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

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

let总是用作闭包的解决方案。

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

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

Answer 3

您可能也更喜欢使用Fetch API代替XMLHttpRequest 。 然后你要做的就是利用一些Promise.all()函数。

 var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"], url = "https://wind-bow.glitch.me/twitch-api/channels/", proms = index.map(d => fetch(url+d)); Promise.all(proms) .then(ps => Promise.all(ps.map(p => p.json()))) // p.json() also returns a promise .then(js => js.forEach((j,i) => (console.log(`RESPONSE FOR: ${index[i]}:`), console.log(j)))); 

 .as-console-wrapper { max-height: 100% !important; } 

Answer 4

我刚才有同样的问题。 只需使用“this.responseText”而不是“request.responseText”。 而已。