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

Posted 2023-04-15

【中文标题】如何使用ajax创建数组并在没有回调函数的情况下对其进行修改？

【英文标题】：How to create an array with ajax and modify it without callback function?

【发布时间】：2015-10-09 02:19:36

【问题描述】：

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

获取用户的播放列表选择 使用这些播放列表中的艺术家 ID 填充数组 基于数组进行更多的 ajax 调用。 使用步骤 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

【问题讨论】：

不能在getArtists ajax 函数的success 函数中直接调用doSomethingWithArtistArray 吗？然后在doSomethingWithArtistArrayajax函数的success函数中调用doAnotherThingWithArray？

您可能需要使用promise's - 或在jQueery 中使用$.Deferred

它应该可以工作..因为你正在使用async:false...但它不是一个很好的解决方案......尤其是在一个循环中......有什么特别的理由要做所以

jsfiddle.net/arunpjohny/x2z758q7/1 - 你的函数中有一些语法错误

【参考方案1】：

问题是您将 Ajax 请求视为同步的，而它们是异步的（您应该这样做以防止阻塞浏览器）。

最好的方法是：

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

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

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

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

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

对于第三种选择，由于您使用的是 jQuery，因此您可以使用 $.when 来使用 Promise。查看this example。如果您喜欢 Promise 的想法并计划向 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
);

【讨论】：

感谢您的快速回复（尽管我的回复很晚）！我使用了 Promise 来让它工作，我对结果很满意。我唯一的问题是，对于某个艺术家的相关艺术家的一些回应是不确定的。我自己会想办法的。

检查这些艺术家在 Spotify 应用程序的 Spotify 页面中是否有相关艺术家。如果有，它们应该被退回。您还可以使用 Web API 控制台developer.spotify.com/web-api/console/…

轻松检查请求