順番通りに待つ（async / await）

01 / 05

then のネストは読みにくい

Promise は便利だけれど、処理が重なると .then の入れ子やチェーンが長くなって、読むのが大変になってくる。

「待つ処理」を、ふつうの同期コードと同じように上から下へまっすぐ書きたい。そのために生まれたのが async と await だよ。

02 / 05

関数の前に async と書くと、その関数は非同期関数になる。

async を付けた関数の中でのみ、次の await が使えるようになるよ。また、async 関数の戻り値は自動的に Promise で包まれる。

const hello = async () => {  return "こんにちは";};hello().then((msg) => console.log(msg));

実行結果

こんにちは

03 / 05

Promise の前に await を置くと、その Promise が完了するまでその行で待機し、完了したら結果を直接取り出してくれる！

.then を書かなくても、ふつうの変数に結果が入ってくるのが最大の革命だよ。

const run = async () => {  const p = Promise.resolve("荷物");  const item = await p;  console.log(item);};run();

実行結果

荷物

04 / 05

await を並べて書けば、1つめが終わってから2つめ、2つめが終わってから3つめ、と順番通りに処理が進む。

複雑なコールバックを使わずに、人間の思考順でコードが書けるようになるんだ。

const run = async () => {  const a = await Promise.resolve(10);  const b = await Promise.resolve(20);  console.log(a + b);};run();

実行結果

05 / 05

ここまでを整理しておこう。

それじゃあ、await で待ってみよう。