MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

async function

翻譯不完整。請協助 翻譯此英文文件

使用 async function 宣告可以定義一個非同步函式,回傳一個 AsyncFunction 物件。

你也可以使用 async function expression 來定義一個非同步函式

語法

async function name([param[, param[, ... param]]]) {
   statements
}

參數

name
函式名稱。
param
傳遞至函式的參數名稱。
statements
組成該函式主體的陳述。

回傳值

一個 AsyncFunction 物件,用來表示一個非同步函式,該非同步函式會執行該函式內的程式碼。

描述

async function 被呼叫的時候,它會回傳一個 Promise 。當 async function 回傳一個值,該 Promise 狀態會是 resolved 且帶有該回傳值。當 async function 拋出一個例外或某個值,該 Promise 狀態會是 rejected 且帶有該拋出的值。

async function 內部可以使用 await 表達式,它會暫停此 async function 的執行,並且等待傳遞至表達式的 Promise 的解析,解析完之後會回傳解析值,並繼續此 async function 的執行。

async/await function 的目的在於簡化同步操作 promise 的表現,以及對多個 Promise 物件執行某些操作。就像 Promise 類似於具結構性的回呼函式,同樣地,async/await 好比將 generator 與 promise 組合起來。

範例

簡單範例

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

async function add1(x) {
  var a = resolveAfter2Seconds(20);
  var b = resolveAfter2Seconds(30);
  return x + await a + await b;
}

add1(10).then(v => {
  console.log(v);  // prints 60 after 2 seconds.
});

async function add2(x) {
  var a = await resolveAfter2Seconds(20);
  var b = await resolveAfter2Seconds(30);
  return x + a + b;
}

add2(10).then(v => {
  console.log(v);  // prints 60 after 4 seconds.
});

使用 async function 改寫 promise 鏈

一個 API 呼叫所回傳的 Promise 會導致一個 promise 鏈,將函式分隔成多個部份。考慮下列的程式碼:

function getProcessedData(url) {
  return downloadData(url) // returns a promise
    .catch(e => {
      return downloadFallbackData(url); // returns a promise
    })
    .then(v => {
      return processDataInWorker(v); // returns a promise
    });
}

它可以用一個簡單的 async function 來改寫成這樣:

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 之中。

規範

Specification Status Comment
ECMAScript Latest Draft (ECMA-262)
The definition of 'async function' in that specification.
Draft Initial definition in ES2017.

瀏覽器相容性

Feature Chrome Firefox (Gecko) Internet Explorer  Edge Opera Safari (WebKit)
Basic support 55 52.0 (52.0) ? ? 42 10.1
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support No support 52.0 (52.0) ? 42 10.1 55

See also

文件標籤與貢獻者

 此頁面的貢獻者: weihanglo, liuderchi
 最近更新: weihanglo,