我需要从 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？
Thanks
有人能给我解释一下为什么吗？如何获取我需要的所有 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);
相反，如果您想完全异步（以并发方式）执行所有请求，则request变量必须在循环内声明和作用域。一request对于每个数组元素。你有一些可能性，例如：
- using let https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
- 声明回调
- using IIFE https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
- 使用数组.forEach() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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, []);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
