【JavaScript】async function

以下內容為學習記錄，可以參考 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。