如何在for循环中调用ajax函数

Question

我是 ajax 和 JavaScript 的新手。我想要做的是多次调用 ajax 函数以从资源中获取某些数据，然后将所有数据“推送”到一个数组中，以便我稍后可以在代码中使用它。这是我的代码。

var arr = [];
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (i = 0; i < users.length; i++) {
    $.ajax({
        url: "https://api.twitch.tv/kraken/streams/" + users[i],
        success: function(data) {
            arr.push(data);
        },
        error: function(data) {
            arr.push("blank");
        },
        complete: function() {
            if (i == users.length) {
                console.log(arr); //This seem to print even when the condition isn't true
            }
        }
    });
}

代码的问题在于，即使i不等于，它也会打印到控制台users.length

我的问题是；我如何确保它i == users.length在打印到控制台之前一直等到为真？请记住，我仍然希望该过程是异步的。

Answer 1

以下是如何调用所有考虑其成功的请求，而无需在另一个请求上运行：

var arr = [];
var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var runRequests = function(userIndex) {
  if (users.length == userIndex) {
    console.log("runRequests Success", arr);
    return;
  }

  var user = users[userIndex];

  $.ajax({
    url: "https://api.twitch.tv/kraken/streams/" + user,
    success: function(data) {
      arr.push(data);
    },
    error: function() {
      arr.push({});
      console.error("runRequests Error", "user", arguments);
    },
    complete: function() {
      runRequests(++userIndex);
    }
  });
};

runRequests(0);

工作演示