sugulogの日記

JavaScript、Promiseオブジェクトの応用編!非同期処理で並列処理、直列処理を扱おう!!

スポンサードリンク

f:id:sugulog:20210821184257p:plainこんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptとPromiseオブジェクトの応用編いうことで

  •  非同期処理で並列処理、直列処理を扱おう

について簡単に解説します!!

その為このブログを読むことで、Promiseオブジェクトについてより理解が深まるのはもちろん、非同期処理の並列処理、直列処理についても理解が深まります。

是非最後までご愛読ください。

Promiseオブジェクトの基礎については以下で解説しております。

sugulog.hatenadiary.jp

今回は、

・並列処理

・直列処理

の順で解説していきます。

では早速、みていきましょう!!

・並列処理

Promiseオブジェクトでは複数の処理を同期に実行させ、その処理が全て完了した時に次の処理に繋げるような処理の順番を制御することできます。(並列処理)

そしてそんな処理の順番を制御するのがPromise.all(配列)メソッドです。

引数には配列でPromiseオブジェクトを指定し、その指定したPromiseオブジェクトの処理がresolved(処理成功)になった際に次の処理に進ませることができます。

実際にコードを見てみましょう。

f:id:sugulog:20210821220034p:plain

2つのPromiseオブジェクトで並列処理を行なっています。

Promise.allの引数としては配列の中に2つのPromiseオブジェクトを指定しています。

では実際にコンソールで処理の順番を確認して見ましょう。

f:id:sugulog:20210821220751g:plain

非同期処理により処理を遅らせていない一番最後のconsole.log()が始めに実行されています。

次に1つ目のPromiseオブジェクト、続けて2つ目のPromiseオブジェクトが実行されています。

そして最後に2つのPromiseオグジェクトがresolvedになったと同時に、Promise.allに対しthen()で指定した処理が実行されているのを確認できますね!

このように指定したPromiseオブジェクトの処理を全て待つのがPromise.allです。

またPromise.race()というのもあり、こちらは引数に配列で指定したPromiseオブジェクトの内、1つでもresolved(処理成功)になった際に次の処理に進ませることができます。

・直列処理

処理が終わった時に次の処理につなげていくような直列処理は外部データから情報を取得し、その情報を元に次の処理を行う際などによく用いられます。

Promiseオブジェクトのみで記述する際には、then()の中でPromiseオブジェクトをインスタンス化させることで複数の処理が繋がった直列処理を実施できます。

こちらも実際にコードを見てみましょう。

f:id:sugulog:20210822145651p:plain

コードとしては見づらいですが記述としてはシンプルです。

then()の中でPromiseオブジェクトをインスタンス化させ、そのPromiseオブジェクトに対しthen()を記述することで処理を繋いでいます。

では実際にコンソールで処理の順番を確認して見ましょう。

f:id:sugulog:20210822150506g:plain

2つ目の処理をsetTimeout()で遅らせていたのですが、3つ目の処理は実行されていませんね。

そして2つ目の処理が終わると同時に、3つ目の処理が実行されているのが確認できます!

このようにある処理が終わった時に次の処理が行われるような、複数の処理が繋がっている直列処理も記述することもできます。

またasync/awaitを使うことでよりコード自体をシンプルにすることもできます。

async/awaitについてはまた後日記事を作成いたしますので、そちらをご確認ください。

sugulog.hatenadiary.jp

 

以上、今回のブログでした。

Promiseオブジェクトについてより理解が深まり、非同期処理の並列処理、直列処理についても理解が深まりましたか??

非同期処理を扱うことで実装の幅が格段に広がります。

1歩ずつ1歩ずつ技術力を高めていきましょう(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!