[英]Wait for async calls inside a loop to finish
我知道类似的问题已经被问过很多次了,但有些是旧的并建议了不推荐使用的解决方案,有些描述了一个解决方案,但不是在循环的上下文中,而且没有一个直接回答我的问题。 我想知道在另一段代码运行一堆异步调用之后运行一段代码的最新和最好的方法是什么。
这是我拥有的代码的一般结构:
function fetchProperty(input) {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1' + input
}).done(function(resp){
return $.parseJSON(resp).title;
});
}
inputValues = [1, 2];
outputValues = [];
$.each(inputValues, function(index, value){
outputValues.push(fetchProperty(value));
});
console.log(outputValues); // will return an empty array
本质上,我希望在$.each()
内部进行的所有 AJAX 调用都完成之后才执行最后一行代码。 显然,我不想使用async: false
因为它已被弃用。 在所有其他延迟的 AJAX 调用完成之后,如何延迟console.log
的最佳实践是什么?
尝试使用异步等待,如下面的代码所示。 问题似乎是获取是异步的,但控制台日志不是,所以它在获取数据之前打印
async function fetchProperty(input) {
const resp = await $.ajax({
url: 'http://some.api/' + input + '/foobar'
});
return $.parseJSON(resp).someProperty;
}
inputValues = ['this', 'that'];
outputValues = [];
$.each(inputValues, async function(index, value){
outputValues.push(await fetchProperty(value));
});
console.log(outputValues);
我不确定$.ajax
返回一个 thenable (类似承诺) object 。 然后我$.ajax
转换为 Promise,然后使用await
关键字从 function 中获取值。 我使用for...of
而不是$.each
来完成此任务,因为$.each
使用callback
样式,因此很难使其与async/await
一起使用。
function fetchProperty(input) {
return new Promise((resolve) => { // return a Promise
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/' + input
}).done(function (resp) {
resolve(resp.title); // resolve here
});
});
}
async function main() {
const inputValues = [1, 2];
const outputValues = [];
for (const value of inputValues) {
outputValues.push(await fetchProperty(value));
}
console.log(outputValues); // the values
}
main();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.