- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用回调来消除代码中的同步 ajax 调用,但我不知道这是如何工作的。我使用 Spotify API 获取播放列表中的所有艺术家,然后根据该信息执行任务。代码的基本逻辑是:
问题是,如果我不将步骤 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
}
最佳答案
问题在于,您将 Ajax 请求视为同步请求,而实际上它们是异步的(您应该这样做以防止阻塞浏览器)。
最好的方法是:
在从 Spotify 获取多个艺术家的特定情况下,请使用 getting several artists 的端点。 。这将减少您需要向 Spotify 的 Web API 发出的请求量。
如果使用回调函数,您将发出 Ajax 请求。然后在其回调中,您将检查是否需要使用下一个 block 发出另一个 Ajax 请求。如果您不需要发出任何其他请求,因为您已完成,则调用下一个函数,在本例中为 doSomethingWithArtistArray
。
如果您使用 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
});
关于javascript - 如何用ajax创建数组并在没有回调函数的情况下修改它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31508386/
我是一名优秀的程序员,十分优秀!