今までなんとなく,それとなくググりつつ非同期処理を実装していたんですけど,React + TypeScript でやってると流石に雰囲気ではきつくなってきたので,これを機にしっかりと理解していきたいなと思います。
同期と非同期
非同期処理の前にまずは同期処理を改めて理解しておきます。
同期処理
コードを順番に処理し,ひとつの処理が終わるまでは次の処理を行わない。
基本上から順番に処理が行われていくから直感的でわかりやすい。
同期処理の問題点
時間がかかる処理の場合,その処理が終わるまで他の処理ができない。
とくにJavaScriptの場合ブラウザのメインスレッド(UIスレッド)を使ってUIに関する処理も行うため,画面がフリーズしたみたいになってしまう
この問題は非同期処理で解決できる
非同期処理
同期処理と同様に順番に処理していくが,ひとつの処理が終わるのを待たずに次の処理を行う。
非同期処理はメインスレッドで実行されるが,処理を一定の単位ごとに分けて,切り替えながら並行処理している。
そのため,重い処理が平行して走ると切り替えが遅れることもある。
非同期の問題点
try…catch構文で非同期的な例外をキャッチできない。
コールバック関数ないで同期的なエラーとしてならキャッチできるが非同期処理の中で例外が発生したことを非同期処理の外へは伝えることができない。
非同期処理だとこの処理が終わったらこの処理を行いたいというのがうまくできない場合がある。
非同期処理の例外取り扱いパターン
非同期処理の例外,処理順序の取り扱いとして,コールバック, Promise, Async Functionの3種がある。
まとめ
めっちゃ眠くなる。
こういうのは朝やったほうが効率良さそうですね。
朝,起きれないから結局夜になっちゃうんですけどね。
それではまた明日。