javascript - 如何用ajax创建数组并在没有回调函数的情况下修改它？

Question

我正在尝试使用回调来消除代码中的同步 ajax 调用，但我不知道这是如何工作的。我使用 Spotify API 获取播放列表中的所有艺术家，然后根据该信息执行任务。代码的基本逻辑是:

1. 获取用户的播放列表选择
2. 使用这些播放列表中的艺术家 ID 填充数组
3. 根据数组进行更多 ajax 调用。
4. 使用第 3 步中的数组执行另一项任务。

问题是，如果我不将步骤 2 和 3 设置为同步，则步骤 4 将出现在步骤 2 和 3 之前。但我不能只在步骤 2 结束时调用步骤 3，在步骤 3 函数结束时调用步骤 4，因为两者都发生在 while 循环中。无法找到解决方案。

调用函数

这个 while 循环遍历用户在多选框中的所有选择，并调用 ajax 函数来附加数据。

artistArray = [];

while (artistUrls[i] != null) {
    getArtists(artistArray, artistUrls[i]);
    i++;
}

doSomethingWithArtistArray(artistArray);

doAnotherThingWithArray(artistsArray);

ajax函数

使用ajax调用来获取艺术家信息并将其附加到数组

getArtists(artistArray, url) {
    (if (url == null) {
        return;
    }

    $.ajax({
              async: false,
              url: url,
              headers: {
                'Authorization': 'Bearer ' + access_token
              },
              error: function() {
                console.log("Something went wrong with " + url);
                return;
              },

              success: function(tracks) {
                getArtists_Append(artists, frequencyArray, tracks); //Uses a while loop to append all the artist information to artistArray
              },

            });
            //My idea was to call doSomethingWithArtistArray here but that's not working because there might be more calls to make.
            console.log("finished getting artists");
            return;
          }
}

获取艺术家=

getArtists_Append {

while loop that populates the array
}

Answer 1

问题在于，您将 Ajax 请求视为同步请求，而实际上它们是异步的(您应该这样做以防止阻塞浏览器)。

最好的方法是:

1. 在从 Spotify 获取多个艺术家的特定情况下，请使用 getting several artists 的端点。 。这将减少您需要向 Spotify 的 Web API 发出的请求量。

2. 如果使用回调函数，您将发出 Ajax 请求。然后在其回调中，您将检查是否需要使用下一个 block 发出另一个 Ajax 请求。如果您不需要发出任何其他请求，因为您已完成，则调用下一个函数，在本例中为 doSomethingWithArtistArray。

3. 如果您使用 Promise，则使用 Promise.all() 传递 Promise 数组，其中每个 Promise 都包装一个 Ajax 请求。当您已经知道需要发出哪些请求，并且不需要请求的响应来确定要发出的下一个请求时，这非常有用。

看看 Code Examples section在 Spotify 开发者网站上查看一些使用 Web API 的开源网站。

例如，您可以在Sort Your Music中看到如何应用第二个替代方案。当 getting playlists tracks 。如果有更多轨道需要获取，该函数将向下一个 block 发出请求，否则不会。

对于第三种选择，由于您使用的是 jQuery，因此您可以使用 $.when 来使用 Promise。查看this example 。如果您喜欢 Promise 的想法并计划向 Web API 发出其他请求，我建议您使用像 Spotify Web API JS 这样的包装器。 (无耻的 self 推销)。这样您就可以简单地执行以下操作:

var api = new SpotifyWebApi();

var promises = [];
promises.add(api.getArtists(['id1', 'id2', 'id3', 'id4', 'id5']));
promises.add(api.getArtists(['id10', 'id11', 'id12', 'id13', 'id14']));
Promise.all(promises).then(function(data) {
  // data contains the result of the promises (ajax requests)
  // do something with it
});