JavaScriptの非同期処理について色々勉強したのでまとめてみました。
JavaScriptには、主にPromiseとasyncにより非同期処理を書く方法があります。
そもそも非同期処理とはなにか
同期処理と違い、すべての動作が完了する前に、あるいは並行して処理を実行させる事ができる処理のことを非同期処理と言います。
同期的な処理の場合は、
A
↓
B
↓
C
↓
D
↓
E
↓
F
という順番に処理を実行させなければなりませんが、非同期処理の場合
A D
↓ ↓
B E
↓ ↓
C F
というように、同時並行で処理をさせることが出来るようになるので、パフォーマンスを向上させることが出来るようになります。
これが非同期処理の強みです。
非同期処理の書き方
Promise
非同期処理の書き方の一つに、Promiseというものがあります。
これは、JavaScriptの非同期処理を書く際にPromiseのブロックで囲われている処理を非同期的に実行するように命令するためのものです。
3つの状態を用いて処理を書いていきます。
- pending：非同期処理が実行中の状態
- fulfilled：非同期処理が問題なく終わった状態
- rejected：非同期処理に問題が発生した状態
Promiseでオブジェクトを作る際は、resolveとrejectの状態を持ちます。
resolveとrejectはなにか
-
resolve
非同期処理が成功した際に呼び出される異コールバック関数。 -
reject
非同期処理が失敗した際に呼び出されるコールバック関数。
思わぬバグを踏む可能性がある際に、try-cactchで握りつぶさなくても良くなるので是非活用していこう。 -
.then
.then メソッドはこのPromiseが成功した場合に呼ばれるコールバック関数を設定することができます。
なのでこれらを繋げていけばチェーンのように非同期処理を書くことも出来るわけです。
async/await
Promiseのあとに出てきた非同期処理の書き方です。
関数につけると、非同期関数として書くことができます。
Promiseと同じオブジェクトを返すので、.thenでコールバック関数を繋げて書くこともできます。
複数の非同期処理を書く際などに、非同期処理が実行される順番も指定したいという場合があると思います。
その際には、awaitをつけることで順番を指定することもできます。