非同期処理についてPromiseなどを含めてざっくり理解する。
はじめに
reactで開発をしていてasync/await, promiseあたりにぶち当たったので個人的観点からほんの少し掘り下げてみようと思った。
非同期処理とは
今まで非同期処理について「時間がかかる処理は終了を待たずに次の処理が実行されるんだな」というざっくりとした認識しか持っていなかった。では「時間がかかる処理」つまり 「非同期的に実行される処理」 とは具体的に何を指すのかを調べてみた。
非同期的に実行される処理って？
非同期処理について調べると例としてsetTimeout()という関数が出てきてこの関数内の処理の終了を待たずに次の処理が実行されるよという説明がされているものをよく見る。
疑問点
ここで自分はsetTimeout()と普通のsum = 1 + 1みたいな簡単な処理の違いとはなんなのかということに疑問を持った。つまりこの処理は非同期で処理しようという判断はどうなされているのかということだ。
非同期API
まずわかったことが非同期APIなるものが存在すること。setTimeout()などもその中の一つで、他にもfetch()などがある。そもそも非同期APIはなぜ非同期に処理を行えるのかみたいな深掘りは一旦置いておく。
ここでfetch()やsetTimeout()などで返ってきた値などを用いて後続の処理を行いたい場合もたくさんあるので、async/awaitを使用して非同期APIの終了を待ってから後続の処理を行うというところも理解できた。
Promiseについて
Promiseは、非同期処理が成功した場合の処理（resolved/充足）と失敗した場合の処理（rejected/拒否）を定義するためのjavascriptのオブジェクトである。promiseオブジェクトはpromiseStatusというプロパティを保持していてPending（保留中）、Fulfilled（充足）、Rejected（拒否） の3つの状態を持つ。
promiseを使用するメリットとして、成功時のresolved関数とエラー時のrejected関数に分かれているのでそれぞれ何が起こっているかわかりやすいこと、複数の非同期メソッドをつなげて処理を行う時、Promiseをチェインさせて書くことができることなどが挙げられる。
終わりに
個人的にわからなかったところをざっくりとまとめて書いてみた。今回の内容の細かいところについては今後もっと深めていく必要がありそう。
参考にしたサイト
【JavaScript】promiseオブジェクトとは？メリットや使い方
非同期APIと環境
JavaScriptの同期処理と非同期処理をやさしく解説します。
Discussion