时间戳

首页 > 解决方案 > 等待循环内的异步调用完成

javascript - 等待循环内的异步调用完成

问题描述

我知道类似的问题已经被问过很多次了，但有些问题已经过时并提出了不推荐使用的解决方案，有些描述了一个解决方案，但不是在循环的上下文中，而且没有一个直接回答我的问题。我想知道在另一段代码运行一堆异步调用之后运行一段代码的最新和最好的方法是什么。

这是我拥有的代码的一般结构：

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

本质上，我希望在所有 AJAX 调用$.each()都完成之后才执行最后一行代码。显然，我不想使用它，async: false因为它已被弃用。console.log在所有其他延迟的 AJAX 调用完成后如何延迟的最佳实践是什么？

标签： javascriptjqueryjquery-deferred

解决方案

尝试使用异步等待，如下面的代码所示。问题似乎是获取是异步的，但控制台日志不是，所以它在获取数据之前打印

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

推荐阅读