以下內容為學習記錄，可以參考 MDN 原文。

環境

• node v12.18.1
• npm 6.14.5
• vscode 1.46
• Microsoft Edge 83

概念

async function 用來定義一個返回 AsyncFunction 物件的非同步函式。非同步函式是指通過事件迴圈非同步執行的函式，它會通過一個隱式的 Promise 返回其結果。如果你在程式碼中使用了非同步函式，就會發現它的語法和結構會更像是標準的同步函式。

記住 await 關鍵字只在非同步函式內有效。如果你在 async 非同步函式外使用它，會丟擲語法錯誤。

非同步函式示例

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

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();
 

非同步函式表示式

非同步函式表示式與非同步函式語句非常相似，語法也基本相同。它們之間的主要區別在於非同步函式表示式可以省略函式名稱來建立一個匿名函式。另外，非同步函式表示式還可以用在 IIFE (立即執行函式表示式，Immediately Invoked Function Expression)。

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

let asyncCall = async function() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}
 

Promise 與 async

Promise

function getProcessedData(url) {
  return downloadData(url) // 返回一個 promise 物件
    .catch(e => {
      return downloadFallbackData(url)  // 返回一個 promise 物件
    })
    .then(v => {
      return processDataInWorker(v); // 返回一個 promise 物件
    });
}

async

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}
 

注意，在上述示例中，return 語句中沒有 await 操作符，因為 async function 的返回值將被隱式地傳遞給 Promise.resolve。