數組上的 JavaScript Async/Await console.log() 返回空

Question

你好 Stack Overflow 社區，我帶着一個與 JS async/await 相關的問題來找你。 我正在嘗試調用一個異步函數，然后將數組記錄到異步函數將結果推送到控制台的位置。 如果我直接在控制台中這樣稱呼它：

console.log(Page.data) - 我可以看到它有結果，但如果點擊按鈕調用它，它會記錄一個空數組。

// It is a nested object so do not worry if you don't exactly understand where Page.data comes from
Page.data = []

async function f1() {
  // Fetch JSON data
  // Process data 
  // Pushes at some point to the Page.data array
}
async function f2() {
  // Fetch JSON data
  // Process data 
  // Pushes at some point to the Page.data array
}
async function f3() {
  // Fetch JSON data
  // Process data 
  // Pushes at some point to the Page.data array
}

async function load(loader) {
    let fn = async function() {};
    if(condition1) fn = f1;
    else if(condition2) fn = f2;
    else fn = f3;

    // This is the line that makes me problems
    // According to documentation async functions return a promise
    // So why would the array in the case be empty?
    // Since I am telling it to display after the function is done
    await fn(loader).then(console.log(Page.data))
}

這只是我的代碼和邏輯的模板。 我希望你能理解我要去哪里。 您的幫助將不勝感激。

Answer 1

await 表達式會導致異步函數執行暫停，直到 Promise 被解決（即完成或拒絕），並在完成后恢復異步函數的執行。 恢復時， await 表達式的值是已完成的 Promise 的值。

例如（這是一個帶有一些注釋的 MDN 示例）：

function resolveAfter2Seconds(x) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  // note that here, you are "awaiting" the RESOLVED RESULT of the promise.
  // there is no need to "then" it.
  var x = await resolveAfter2Seconds(10);
  // the promise has now already returned a rejection or the resolved value. 
  console.log(x); // 10
}

f1();

所以你會“等待”你的函數，它會阻止執行，直到承諾解決或拒絕。 在該行之后，您將運行 console.log，它會按預期記錄。 簡短的回答，“刪除然后”。

我應該補充一下，如果“awaited”函數的結果不是一個承諾，它會被轉換為一個承諾（所以從技術上講，沒有必要返回一個承諾，它會為你包裝你的返回值）。

Answer 2

問題是你可以使用then和await相同的方法，讓我們檢查一些MDN提供的例子：

這是一個使用async/await的有效Promise ：

 let myFirstPromise = new Promise((resolve, reject) => { setTimeout(function() { resolve("Success!"); }, 250) }) const functionCaller = async() => { const result = await myFirstPromise console.log("the result: ", result); } functionCaller();

你正在嘗試的是：

 let myFirstPromise = new Promise((resolve, reject) => { setTimeout(function() { resolve("Success!"); }, 250) }) const functionCaller = async() => { // you are not returning anything here... actually you are not doing anything with the response. despite it shows something, it is not sending any response await myFirstPromise.then(console.log("something happened")) } // then this function doesn't really get a value. functionCaller();

所以你需要在你的load調用中做的是像這樣改變它：

async function load(loader) {
    let fn = async function() {};
    if(condition1) fn = f1;
    else if(condition2) fn = f2;
    else fn = f3;

    return await fn(loader)
}