async function

このインタラクティブデモのソースは GitHub のリポジトリに格納されています。インタラクティブデモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送ってください。

構文

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

引数

name

関数名。

param

関数に渡す引数名。

statements

関数の本体を構成するステートメント。

戻り値

関数の中に含まれる、コードを実行する非同期関数を表す AsyncFunction オブジェクトを、resolved Promise の値と共に返します。rejectedの場合は補足されない例外を非同期関数から投げます。

説明

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

キーワード await は、async 宣言された関数の中でのみ有効です. async 関数の外で使用した場合は SyntaxErrorとなります。

例

シンプルな例

var resolveAfter2Seconds = function() {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("slow");
      console.log("slow promise is done");
    }, 2000);
  });
};

var resolveAfter1Second = function() {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve("fast");
      console.log("fast promise is done");
    }, 1000);
  });
};

var sequentialStart = async function() {
  console.log('==SEQUENTIAL START==');

  // 1. ここは即時実行される
  const slow = await resolveAfter2Seconds();
  console.log(slow); // 2. ここは 1. の2秒後に実行される

  const fast = await resolveAfter1Second();
  console.log(fast); // 3. ここは 1. の3秒後に実行される
}

var concurrentStart = async function() {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds(); // 即時実行
  const fast = resolveAfter1Second(); // 即時実行

  // 1. ここは即時実行される
  console.log(await slow); // 2. ここは 1. の2秒後に実行される
  console.log(await fast); // 3. ここは 1. の2秒後（2.の直後）に実行される
}

var concurrentPromise = function() {
  console.log('==CONCURRENT START with Promise.all==');
  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
    console.log(messages[0]); // slow
    console.log(messages[1]); // fast
  });
}

var parallel = async function() {
  console.log('==PARALLEL with await Promise.all==');
  
  // 2つの jobs を並列に実行し両方が完了するのを待つ
  await Promise.all([
      (async()=>console.log(await resolveAfter2Seconds()))(),
      (async()=>console.log(await resolveAfter1Second()))()
  ]);
}

// この関数はエラーハンドリングをしていません。後述の注意書きを参照してください。
var parallelPromise = function() {
  console.log('==PARALLEL with Promise.then==');
  resolveAfter2Seconds().then((message)=>console.log(message));
  resolveAfter1Second().then((message)=>console.log(message));
}

sequentialStart(); // 2秒後に "slow" をログ出力し、その1秒後に "fast" をログ出力する

// 見やすくするため setTimeout で直前の処理が終わるのを待つ
setTimeout(concurrentStart, 4000); // 2秒後に "slow" と "fast" をログ出力する

// 直前の処理を待つ
setTimeout(concurrentPromise, 7000); // concurrentStart と同様

// 直前の処理を待つ
setTimeout(parallel, 10000); // 本当に並列処理となるため1秒後に "fast" とログ出力し、その1秒後に "slow" とログ出力する

// 直前の処理を待つ
setTimeout(parallelPromise, 13000); // parallel と同様

promise チェーンをasync function で 書き換える

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 でラップされているからです。

仕様

ブラウザー実装状況

関連情報

• async function expression
• AsyncFunction オブジェクト
• await
• "innolitics.com" の "Decorating Async Javascript Functions"