异步等待数组数据答案

【问题标题】：Async await on array data异步等待数组数据
【发布时间】：2020-12-22 23:35:19
【问题描述】：

由于某种原因，我的异步调用没有按预期工作。这是我正在尝试做的事情：

循环进行多个 ajax 调用
成功后，将一些 API 数据推送到全局数组
在另一个函数中使用该数组（例如打印出来）

var authcodes = ["E06000001","E06000002","E06000003"];
var dict = [];

async function ajaxCall() {
    for(var i=0;i<authcodes.length;i++){
        $.ajax({
           type: "GET",
           url: 'https://api.coronavirus.data.gov.uk/v1/data?filters=areaCode=' + authcodes[i] +'&structure={"areaCode":"areaCode","cumCasesByPublishDate":"cumCasesByPublishDate"}',
            dataType: "json",
            success: function(data) {
                dict.push(data.data[0].cumCasesByPublishDate);
            }
       });

    } return dict;
}

async function printArr () {
    const someApiRes = await ajaxCall()
    console.log(someApiRes[1]); //this doesn't work
    console.log(dict[1]); //this doesn't work

}

printArr();

这里是带有代码注释的 JSFiddle：https://jsfiddle.net/gjv9hrpo/1/

我知道printArr() 函数必须在数组填充后运行，因为我希望等待能够解决的async 性质。是不是我用错了？

谢谢。

【问题讨论】：

你不是await在ajaxCall里面的任何东西
您的 ajaxCall 函数是异步的，但它不会等待您正在使用的 $.ajax 方法。
尝试使 ajaxCall 成为一个承诺，当成功回调触发时解决。这是一个例子：javascript.info/promise-basics
改用fetch()，它已经返回promise，而且GETting JSON 很容易启动。
太棒了！ await $.ajax({.. 我相信应该这样做！

标签： javascript ajax asynchronous async-await

【解决方案1】：

使用 promise.All()

async function ajaxCall() {
  var promises = [];
    for(var i=0;i<authcodes.length;i++){
        promises.push($.ajax({
           type: "GET",
           url: 'https://api.coronavirus.data.gov.uk/v1/data?filters=areaCode=' + authcodes[i] +'&structure={"areaCode":"areaCode","cumCasesByPublishDate":"cumCasesByPublishDate"}',
            dataType: "json",
            success: function(data) {
                dict.push(data.data[0].cumCasesByPublishDate);
            }
       }));

    }
    await Promise.all(promises); 
    return dict;
}

【讨论】：

你还是忘了使用await关键字。

【解决方案2】：

使用 Promise 执行此操作可能更有意义。

Promise.all 让您知道所有输入承诺何时已履行或其中一个承诺何时被拒绝。

var authcodes = ["E06000001", "E06000002", "E06000003"];

function ajaxCalls() {
  return Promise.all(
    authcodes.map((code) => {
      return new Promise(async (resolve) => {
        const response = await fetch(
          `https://api.coronavirus.data.gov.uk/v1/data?filters=areaCode=${code}&structure={"areaCode":"areaCode","cumCasesByPublishDate":"cumCasesByPublishDate"}`
        )
        const json = await response.json();
        resolve(json.data[0].cumCasesByPublishDate);
      });
    })
  );
}

function printArr() {
  ajaxCalls().then((values) => {
    console.log(values);
  }).catch(e => {
    console.error(e)
  });
}

printArr();

Promise.allSettled 在所有输入的 Promise 都已结算时向您发出一个信号，这意味着它们要么被履行，要么被拒绝。这在您不关心 Promise 状态的情况下很有用，您只想知道工作何时完成，而不管它是否成功。

var authcodes = ["E06000001", "E06000002", "E06000003"];

function ajaxCalls() {
  return Promise.allSettled(
    authcodes.map((code, i) => {
      return new Promise(async (resolve, reject) => {
        if (i ===0 ) reject('something went wrong')

        const response = await fetch(
          `https://api.coronavirus.data.gov.uk/v1/data?filters=areaCode=${code}&structure={"areaCode":"areaCode","cumCasesByPublishDate":"cumCasesByPublishDate"}`
        );
        const json = await response.json();
        resolve(json.data[0].cumCasesByPublishDate);
      });
    })
  );
}

async function printArr() {
  const results = await ajaxCalls();
  console.log(results.map((result) => result.value || result.reason));
}

printArr();

【讨论】：