We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

async function 宣言は、 AsyncFunction オブジェクトを返す async 関数 を定義します。

async function 式 を使用して async 関数を定義することもできます。

構文

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

引数

name
関数名。
param
関数に渡す引数名。
statements
関数の本体を構成するステートメント。

返値

関数の中に含まれる、コードを実行する非同期関数を表す AsyncFunction オブジェクト。

説明

async 関数が呼び出された場合、 Promise を返します。async 関数が値を返した場合、promise は返された値で解決されます。async 関数が例外や何らかの値をスローした場合、 Promise はスローされた値で拒否されます。

async 関数は、 await 式を含むことができます。 await 式は、async 関数の実行を一時停止し、 Promise の解決を待ちます。そして async 関数の実行を再開し、解決された値を返します。

async/await 関数の目的は、 promise を同期的に使用する動作を簡素化し、 Promise のグループに対して何らかの動作を実行することです。 Promise が構造化コールバックに似ているのと同様に、 async/await はジェネレータと promise を組み合わせたものに似ています。

シンプルな例

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


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

add1(10).then(v => {
  console.log(v);  // 4秒後に60を表示します。
});


async function add2(x) {
  const p_a = resolveAfter2Seconds(20);
  const p_b = resolveAfter2Seconds(30);
  return x + await p_a + await p_b;
}

add2(10).then(v => {
  console.log(v);  // 2秒後に60を表示します。
});

Do not confuse await for Promise.all

In add1, execution suspends 2 seconds for the first await, and then again another 2 seconds for the second await. The second timer is not created until the first has already fired. In add2, both timers are created, and then both are awaited. This leads it to resolve in 2 rather than 4 seconds, because the timers are running concurrently. But both of the await calls are still run in series, not in parallel: this is not some automatic application of Promise.all. If you wish to await two or more promises in parallel, you must still use Promise.all.

async function で promise チェーンをリライトする

promise を返す API は 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
    });
}

次のように 1 つの 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 でラップされているからです。

仕様

仕様 ステータス コメント
ECMAScript Latest Draft (ECMA-262)
async function の定義
ドラフト ES2017 における最初の定義。
ECMAScript 2017 (ECMA-262)
async function の定義
標準  

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応55 あり52 なし4210.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり55 あり524210.16.0

関連情報

ドキュメントのタグと貢献者

このページの貢献者: jgs, H1Gdev, mfuji09, yoshioms1, YuichiNukiyama
最終更新者: jgs,