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を表示します。
});

await を Promise.allと混同しないでください

add1 では、1つ目の await によって2秒間待機し、2つ目の await によってさらに2秒間待機します。2つ目のタイマーは、1つ目のタイマーが起動している間は作成されません。add2 では、両方のタイマーが作成され、両方とも待機します。タイマーは同時に実行されているため、4秒間ではなく2秒間で resolve されます。しかし、両方の await の呼び出しは、並列処理ではなく、依然として逐次処理となります。これは、自動的に Promise.all が適用されるわけではないためです。もし、並列した2つ以上の promise で await を実行したい場合は、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

関連情報

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

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