javascript - 在 Javascript 的 for 循环中运行不同的 api

Question

我的目标是记录列表中各种艺术家的所有这些 API。该 API 的问题是每个艺术家都有自己的 API，因此必须多次调用该 API，每个艺术家一次。

var artistList = [...]; //let's say there is a hypothetical 100 artists
var n = artistList.length; //this would be 100

for (var i=0; i<n; i++) {
    var request = new XMLHttpRequest();
    var urlApi = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + artistList[i] + '&api_key=somApiKeyThatWorks&format=json';
    console.log(urlApi);
    request.open('GET', urling, true);

    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {

        var data = JSON.parse(request.responseText);
        console.log(data);
      } else {

      }
    };

    request.onerror = function() {
    };

    request.send();
};

现在，当我运行它并检查控制台时，仅显示最后列出的数据项。因此，我记录了所有这些 API，并且与每个 API 中相应的艺术家正确地记录了所有这些 API，但我只记录了一个 JSON。

如果有人能告诉我如何获取它，以便为每个 API 记录每个 JSON，那就太好了。我有一种感觉，这种情况正在发生，因为 request.responseText 需要一段时间，因此它在完成之前会跳过它，导致它只记录列表中的最后一项。不知道如何解决这个问题。我也无法使用 jQuery，因为我被明确要求不要执行此作业。

Answer 1

问题很简单:request 是非阻塞的，因此它让 for 循环在调用 request.send() 时完成。但是，当 for 循环开始下一次迭代时，request 会被覆盖，因此仅记录最后请求。

有两种方法可以解决这个问题:

• 将请求中的true更改为false。这会将其从非阻塞更改为阻塞，并将暂停循环，直到请求完成并获得响应。那么您就可以保证它会起作用。

• 使用map收集您的结果。即调用artistList.map(makeRequest)，其中makeRequest使用artistList中的艺术家作为输入返回XMLHTTPRequest的结果。

  (我不保证这会起作用!如果不起作用，请寻找相当于对数组进行异步请求操作的东西，或者使用第一种方法。)