异步等待数组数据

Question

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

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

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 printArr() function 必须在阵列填充后运行，因为我希望等待能够解决的async性质。 我用错了吗？

谢谢。

Answer 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;
}

Answer 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 的 state 的情况下很有用，您只想知道工作何时完成，而不管它是否成功。

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