Question

我尝试使用回调来摆脱代码中的同步ajax调用，但我无法弄清楚这是如何工作的。我使用spotify API获取播放列表中的所有艺术家，然后根据该信息执行任务。代码的基本逻辑是：

获取用户的播放列表选择
使用这些播放列表中的艺术家ID填充数组
根据数组进行更多ajax调用。
使用步骤3中的数组执行其他任务。

问题是如果我没有将步骤2和3设置为同步，则步骤4将在步骤2和3之前到来。但我不能在步骤2结束时调用第3步，在步骤3结束时调用第4步，因为它们都发生在while循环中。无法找到解决方案。

通话功能

此while循环遍历多个选择框中的所有用户选择，并调用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;
          }
}

ajax功能

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

getArtists_Append {

while loop that populates the array
}

获取艺术家=

{{1}}

Answer 1

问题在于，您将Ajax请求视为同步，当它们是异步时（并且您应该这样做以防止阻止浏览器）。

最好的方法是：

在从Spotify中提取多位艺术家的特定情况下，请使用getting several artists的端点。这将减少您需要对Spotify的Web API提出的请求数量。
如果使用回调函数，您将发出Ajax请求。然后在其回调中，您将检查是否需要使用下一个块发出另一个Ajax请求。如果您因为完成后不需要提出任何其他请求，请拨打下一个功能，在这种情况下doSomethingWithArtistArray。
如果您正在使用Promises，那么使用Promise.all()传递一组promises，其中每个promise包含一个Ajax请求。当您已经知道需要提出哪些请求时，这非常有用，并且不需要请求的响应来确定下一个请求。

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

例如，您可以在Sort Your Music时看到getting playlists tracks中如何应用第二种备选方案。如果有更多要获取的曲目，该函数将向下一个块发出请求，否则它将赢得。

对于第三种选择，因为您使用的是jQuery，所以可以使用$.when来使用promises。查看this example。如果你喜欢promises的想法并计划向Web API提出其他请求，我建议你使用像Spotify Web API JS这样的包装器（无耻的自我推销）。你可以这样做：

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

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

1 个答案: