Async/await

“async/await” と呼ばれる、より快適に promise を利用する特別な構文があります。驚くほど簡単に理解し、使用することができます。

Async 関数

async キーワードから始めましょう。次のように関数の前に置くことができます:

async function f() {
  return 1;
}

関数の前の用語 “async” は1つの単純なことを意味します: 関数は常に promise を返します。コード中に return <非 promise> がある場合、JavaScript は自動的にその値を持つ 解決された promise にラップします。

例えば、上のコードは 結果 1 を持つ解決された promise を返します。テストしてみましょう: t it:

async function f() {
  return 1;
}

f().then(alert); // 1

…明示的に promise を返すこともでき、それは同じです:

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

したがって、async は関数が promise を返すことを保証し、非promise をその中にラップします。シンプルですよね？しかし、それだけではありません。async 関数の中でのみ動作する別のキーワード await があります。これはとてもクールです。

Await

構文:

// async 関数の中でのみ動作します
let value = await promise;

キーワード await は promise が確定しその結果を返すまで、JavaScript を待機させます。 ult.

これは1秒で解決する promise の例です:

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // promise が解決するまで待ちます (*)

  alert(result); // "done!"
}

f();

関数の実行は行 (*) で “一時停止” し、promise が確定したときに再開し、result がその結果になります。 そのため、上のコードは1秒後に “done!” を表示します。

await は文字通り promise が確定するまで JavaScript を待ってから、その結果で続くことに注目しましょう。その間、エンジンは他のジョブ(他のスクリプトを実行し、イベントを処理するなど)を実行することができるため、CPUリソースを必要としません。

これは、promise.then よりも promise の結果を得るためのより洗練された構文です。読みやすく、書くのが簡単です。

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

チャプター Promise チェーン から例 showAvatar() を取り、async/await を使って書き直してみましょう:

1. .then 呼び出しを await に置き換える必要があります。
2. また、機能させるために関数を async にする必要があります。

async function showAvatar() {

  // JSON を読み込む
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // github ユーザを読み込む
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // アバターを表示する
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // 3秒待つ
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}

showAvatar();

非常にスッキリし、読みやすいですよね？前よりもはるかに良いです。

// モジュールのトップレベルでコードが実行される想定です
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

console.log(user);

(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve); // function() { native code }
    // 1000ms 後に this.num*2 で解決する
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
};

async function f() {
  // 1秒待って、結果は 2　になる
  let result = await new Thenable(1);
  alert(result);
}

f();

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1

エラー処理

もし promise が正常に解決すると、await promise は結果を返します。しかし拒否(reject) の場合はエラーをスローします。それはちょうどその行に throw 文があるように振る舞います。

このコードは:

async function f() {
  await Promise.reject(new Error("Whoops!"));
}

…これと同じです:

async function f() {
  throw new Error("Whoops!");
}

実際には、promise を拒否するまでに時間がかかる場合があります。なので、await は待ち、その後エラーをスローします。

エラーは try..catch でキャッチすることができ、それは通常の throw と同じ方法です:

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

エラーの場合、コントロールは catch ブロックにジャンプします。複数行をラップすることも可能です:

async function f() {

  try {
    let response = await fetch('/no-user-here');
    let user = await response.json();
  } catch(err) {
    // fetch と response.json 両方のエラーをキャッチ
    alert(err);
  }
}

f();

もし try..catch がない場合、async 関数 f() の呼び出しによって生成された promise は拒否されます。それを処理にするには .catch を追加します。:

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() は拒否された promise になる
f().catch(alert); // TypeError: failed to fetch // (*)

そこに .catch を追加し忘れると、未処理の promise エラーを得ます(それはコンソールで見えます)。チャプター Promise チェーン で説明した通り、グローバルイベントハンドラを使用することでこのようなエラーをキャッチすることができます。

// 結果の配列をまつ
let results = await Promise.all([
  fetch(url1),
  fetch(url2),
  ...
]);

サマリ

関数の前の async キーワードは2つの効果があります:

1. 常に promise を返します
2. その中で await を使えるようにします

promise の前の await キーワードは、 promise が確定するまで JavaScript を待たせ、次のことをします:

1. それがエラーであれば、まさにその場所で throw error が呼び出されたのと同じ例外が生成されます。
2. それ以外の場合は、結果を返すので、値に割り当てることができます。

共に、読み書きするのが簡単な非同期コードを書くことができる素晴らしいフレームワークを提供します。

async/await と一緒に promise.then/catch を書く必要はほとんどありませんが、時には（例えば最も外側のスコープで）これらのメソッドを使わなければならないことがあるので、これらが promise に基づいていることを忘れてはいけません。 また、Promise.all は同時に多くのタスクを待つ良い方法です。