等待循環內的異步調用完成

Question

我知道類似的問題已經被問過很多次了，但有些是舊的並建議了不推薦使用的解決方案，有些描述了一個解決方案，但不是在循環的上下文中，而且沒有一個直接回答我的問題。 我想知道在另一段代碼運行一堆異步調用之后運行一段代碼的最新和最好的方法是什么。

這是我擁有的代碼的一般結構：

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的最佳實踐是什么？

Answer 1

嘗試使用異步等待，如下面的代碼所示。 問題似乎是獲取是異步的，但控制台日志不是，所以它在獲取數據之前打印

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

Answer 2

我不確定$.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();