異步等待數組數據

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