はじめに
こんにちは。
非同期処理を楽に書けるPromiseを分かっていない人が多い(10年選手や20年選手が分かっていない)ので、記事を書きます。
大事なところだけやります。解説するというか簡単なプログラムを書きます。(プログラムに斜めの矢印とか使って解説したかったので、画像にしています。)
例外処理やasync/awaitについてはやりません。
では、いってみましょー。
共通仕様
本記事で扱う処理は以下とします。
m1秒後に処理1を行う。
処理1完了後のm2秒後に処理2を行い、処理1完了後のm3秒後に処理3を行う。
処理2,処理3の両方完了後のm4秒後に処理4を行う。
勘違いが無いように、噛み砕くと
処理1の後に処理2,処理3両方が終わるのを待って処理4を行うってことです。
Promiseを使わず書いてみる - 非同期処理って面倒
まずは、Promiseなしで、プログラムを書いてみます。
処理が進むごとにネスト化しているのが分かります。
処理が複雑になると読むのが大変そうですよね。
処理を関数化したところで読みにくさは変わりません。
PromiseオブジェクトってPromiseクラスのインスタンスのことだよ
これ分かってない人が多い気がします。
Promiseって何かっていうと、単なるクラスです。
クラスなんで、Promiseオブジェクトを作るために、もちろんnewする必要があります。
そのコンストラクタの引数が、resolveとrejectを引数とする関数であることが要求されます。
で、そのPromiseオブジェクトは、thenやallメソッドを持ちます。
通信用のAPIであるgetJSONやfetchなどは戻り値がPromiseオブジェクトだから、getJSON(...).then(...)とか書くことができるわけです。
Promiseを使って書いてみる - 見やすいでしょ
右が処理を関数化したやつです。こうすると見やすくなったのが分かりやすいですよね。
簡単なプログラムなのであえてrejectを呼んでいません。
then,allについてはmozillaのリファレンスを参考にしてください。
最後の処理4はPromise化しなくてもOKです。
最後に
then,allの説明はしませんでした。プログラム読めばわかると思ったので。
Promiseは超超超重要です。
理解があやふやな人はこれを機にぜひ習得してみてください。