こんにちは、すぐるです！
sugulogをお読みいただきありがとうございます！！
このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。
少しでもお役に立てれば幸いです。
今回は、JavaScriptとPromiseオブジェクトの基礎編いうことで
-
非同期処理を扱おう
について簡単に解説します！！
その為このブログを読むことで、Promiseオブジェクトの基礎について理解が深まるのはもちろん、非同期処理を扱う技術を手に入れることができます。
是非最後までご愛読ください。
今回は、
・Promiseオブジェクト
・メソッドチェーン
の順で解説していきます。
では早速、みていきましょう！！
・Promiseオブジェクト
非同期処理とは1つの処理を実行中であっても他の処理を実行できる実行方式のことを言います。
JavaScriptではこの非同期処理の実行方式を取っています。
処理時間がかかる関数などを実行した際に、その関数の処理が完了される前に次の処理が実行されたりします(非同期処理)。
そしてPromiseオブジェクトはそんな非同期処理を扱えるオブジェクトで、処理の順番を制御することができます。
使用方法はnew Promise(関数)でインスタンスを生成します。
また引数の中の関数の引数には第一引数としてresolve関数(処理成功時の関数)を指定し、第二引数には任意でreject関数(処理失敗時の関数)を指定し、関数の中で関数として処理を返すことができます。
言葉では理解しにくいので実際にコードを見てみましょう。
上記ではresolve()が実行された場合は引数resolveには成功がvalueとして格納され、reject()が実行された場合は引数rejectにはvalueとして失敗が格納されます。
・メソッドチェーン
メソッドを実行した際にその結果に応じてさらにメソッドを実行する仕組みのこと。
Promiseオブジェクトにおいては処理成功時としてthen(関数)、処理失敗時としてcatch(関数)というメソッドチェーンがあります。
先程resolve()が実行された場合は引数resolveには成功がvalueとして格納され、reject()が実行された場合は引数rejectにはvalueとして失敗が格納されました。
メソッドチェーンを行うことでこの値を継承することができます。
こちらも実際にコードを見てみましょう。
今回は成功時として処理を走らせています。
then(関数)の関数の引数を指定することで値を継承することができます。
またここまでPromiseオブジェクトを理解すると、非同期処理の制御を実感することができます。
Promiseオブジェクト自体は先に処理が始まりますがsetTimeoutで処理の時間を遅らせています。
そしてPromiseオブジェクト後の処理としてthen()、catch()を指定しています。
このように処理の順番を制御することで、ある処理の後に確実に行いたい処理を指定することができます。
そのためコンソールでは非同期処理により「記述としては後」が先に表示され、遅れて「失敗」が表示されるのが確認できます。
このように 1つの処理を実行中であっても他の処理を実行できる非同期処理の処理の順番を扱うのがPromiseオブジェクトです。
またさらに踏み込んだ内容の応用編は以下の記事で解説しています。
以上、今回のブログでした。
Promiseオブジェクトの基礎について理解が深まり、非同期処理を扱う技術を手に入れることができましたか？？
非同期処理はJavaScriptでは必ず抑えたい概念です。
少しずつ確実に自分の力として身につけましょう(^_^)/
最後に！！
今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。
少しでも気になった方はお試しでもいいので1度、読者登録お願いします！
またTwitterでもプログラミングに関することを中心に情報を発信してます。
宜しければそちらのフォローもお願いします。
最後までご愛読いただきありがとうございました！！