この記事は、プログラミング初心者が非同期処理について考える以下の記事の続きです。
先にこちらをご覧ください。
本日はasync/awaitについてまとめます。
async/await
async/awaitで最も重要なポイントは、awaitの右側に書いた非同期処理が完了するまで、次の処理を実行しないことです。上から下へ順番に処理を実行してくれるようになります。
これにより、Promiseの問題点の1つだった、実行される順番がぐちゃぐちゃになる問題が解消されます。
今回もあまりにも難しすぎるので、理解することから逃げました。
最低限ここだけ押さえたいポイントを先にまとめます。
- awaitをつけると右側の非同期処理が完了するまで次の処理は実行されない
- =>上から下へ順番に実行されるからソースコードが読みやすい！
- awaitしたいときは、その関数をasyncで囲う
- =>そういう決まりだから覚える
- asyncで囲んだ関数の返り値は必ずPromiseインスタンスになる
- =>then/catchメソッドが使える
- awaitした非同期処理がrejectされたらエラーをthrowする
- =>そのエラーをtry/catchで捉えられる
Async Functionの定義
asyncキーワードを使って関数を定義することで、その関数は非同期処理を含むことをコードを読む人に示すことができます。
大前提として、asyncをつけなくてもJavaScriptは非同期処理を実行できます。しかし、膨大なソースコードの中で非同期処理が書かれている場合、読み手からするとどこからどこまでが非同期処理なのかは分かりにくいし、どんな順番で処理が実行されるのかも想像しにくいです。実際に動かしてみないとわからん！😇では実装する上で困りますよね。
asyncは、この関数には非同期処理が含まれているよ！ と読み手に示すことができる目印のようなものと解釈しました。
asyncは重要な2つの特性を持ちます。
- asyncで囲んだ関数の返り値は必ずPromiseインスタンスになる
- asyncで囲んだ関数の中でawaitが使える
asyncで囲んだ関数の返り値は必ずPromiseインスタンスになる
おそらく、asyncをつけると内部的に下記の通常の関数のような処理が行われているのだと思います。難しいので飛ばしましょう。
ただasyncをつけるだけで、Promise.resolve("値");を書く必要がなくなっているのはスッキリして良いですね。
// 通常の関数
function doAsync() {
return Promise.resolve("hello");
}
// async関数
async function doAsyncAsync() {
return "hello";
}
asyncで囲んだ関数の返り値は必ずPromiseインスタンスになるので、以下のようにthen/catchメソッドが使えます！
// doAsyncAsync関数の返り値はPromiseインスタンス
doAsyncAsync().then(value => {
console.log(value); // => "hello"
});
asyncで囲んだ関数の中でawaitが使える
asyncキーワードを使用することで、その関数内で await を使って非同期処理を行うことができます。
awaitに関しては明日解説します。
参考