sugulogの日記

JavaScript、async/await構文!非同期処理をよりシンプルに記述しよう!!

スポンサードリンク

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

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

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

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

 

今回は、JavaScriptのasync/await構文いうことで

  •  非同期処理をよりシンプルに記述しよう

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

その為このブログを読むことで、async/await構文について理解が深まるのはもちろん、非同期処理をよりシンプルに記述できるようになります。

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

非同期処理、Promiseオブジェクトについては以下の記事で解説しています。

sugulog.hatenadiary.jp

sugulog.hatenadiary.jp

 

今回は、

・async/await構文

・非同期処理をよりシンプルに記述しよう

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

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

・async/await構文

非同期処理を扱う構文。

Promiseオブジェクトを利用した構文よりも、よりシンプルに非同期処理を扱うことができます。

asyncは関数の前で宣言することにより、非同期処理で扱う関数を定義します。

定義された関数はreturnした場合には戻り値をresolveとして扱い、throwした場合は戻り値をrejectとして扱います。

そのためメソッドチェーンを行う際もreturnの場合はthen()、throwの場合はcatch()を使用します。

f:id:sugulog:20210822183002p:plain

f:id:sugulog:20210822183057p:plain

続いてawaitはasyncで定義された関数内のみで使用できます。

awaitで指定された関数はPromiseオブジェクトの結果が返されるまで処理を待ちます。

そして結果が返された時、asyncで定義された関数の処理を再開します。

f:id:sugulog:20210822204235p:plain

awaitで定義される関数はPromiseオブジェクトの結果を待つので、関数内ではPromiseオブジェクトを生成する必要があります。

それでは実行結果を見て見ましょう。

f:id:sugulog:20210822205048g:plain

awaitで定義した関数はsetTimeoutで処理を遅らせているのにもかかわらず、awaitで定義した関数より後に記述されている処理が、awaitで定義した関数の処理を待ち処理されているのが確認できますね!

・非同期処理をよりシンプルに記述しよう

sugulog.hatenadiary.jp

上記の記事で直列処理して以下のようなコードを紹介しました。

f:id:sugulog:20210822145651p:plain

このコードをasync/await構文を使用すると以下のように記述することができます。

f:id:sugulog:20210823214745p:plain
入れ子状態が緩和されコード自体が非常に見やすくなったと思います。

このようにasync/await構文を用いるとPromiseオブジェクトの記述がシンプルになります。

そして処理自体もしっかりと前の処理を待っているのが確認できますね!

f:id:sugulog:20210822150506g:plain

 

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

async/await構文について理解が深まり、非同期処理をよりシンプルに記述できるようになりましたか??

複雑な非同期処理を扱う際はasync/await構文を積極的に導入しましょう(^_^)/

 

最後に!!

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

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

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

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

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