JavaScript/TypeScriptのasync/awaitを使ったコードの読み方

目的

async/awaitを使うと非同期処理を同期的に書けるが、それが故に実行順が直感的に読み取りにくいことがある。

もちろんasync/awaitの実体はPromiseなのでそれに読み替えれば正確な実行順はわかるが、ここではasync/awaitのままでどう読んだら実行順が理解しやすいのかまとめる。

結論

• awaitキーワードに着目して読む。awaitの次の行から非同期の実行になる¹。
• asyncキーワードには着目しなくてよい。

詳細

async/awaitとは

まず、async/awaitとは何かをまとめる。

async/awaitは非同期処理を同期処理のように書けるJavaScriptの構文。

awaitを書くことで非同期処理を同期処理のように呼び出せる。awaitを書けるのは非同期関数(async function)の中だけであり²、async functionを定義するのにはasyncを使う。

// fuga()はPromiseやasync function

async function hoge() {
  await fuga();
}

hoge();

async/awaitを使ったコードの挙動

結論を先取りすると、asyncが付いていようがいまいがawaitがない限り非同期実行はされないということが言える。

例えば次のようなコードを考える。

async function fuga() {
  console.log('2');
  return;
}

async function hoge() {
  console.log('1');
  await fuga();
  console.log('3');
}

hoge();
console.log("4");

このコードを実行すると、結果はこうなる。

# 結果
1
2
4
3

await fuga()の次から非同期実行になっているので、その次の行の3だけ遅れて出力されている。

このコードからawaitを取り除くと、同期的に、順番通りに1、2、3、4が出力される。

async function fuga() {
  console.log('2');
  return;
}

async function hoge() {
  console.log('1');
  fuga();//<-- awaitを取り除いた
  console.log('3');
}

hoge();
console.log("4");

# 結果
1
2
3
4

結論

• awaitキーワードに着目して読む。awaitの次の行から非同期の実行になる¹。
• asyncキーワードには着目しなくてよい。awaitがない限り、asyncが付いていても非同期実行はされない。¹

1. ここで言っている非同期実行されない/されるというのは、「同期的に書かれたコードが」非同期実行されない/されるということ ↩ ↩² ↩³

2. 厳密にはasync functionの中以外で書けるケースがあるのだが、この記事ではそこまで立ち入らない 参考:top-level awaitがどのようにES Modulesに影響するのか完全に理解する ↩