JavaScriptを使ったPluginを作成しているときに、想定している戻り値が返って来ずに、悩んでいたところ、Promise/aysnc/awaitについて、理解ができていない部分があったために、図にして、流れを整理してみました。
JavaScriptのコードの基本的な流れ
上記に関数A、関数B、関数Cと順に並んだコードがあるとします。
基本的に、コンピューターは、コードを処理するときに、関数Aから順番に処理していきます。
最近では、複数の処理をできるコンピューターもあります。片方で、関数A→関数Bを処理し、もう一方で、関数A'→関数Cの処理を実行するなど、マルチで処理できるようにアレンジできます。
しかしながら、JavaScriptは、シングルスレッドと言われる単一の流れとなるので、基本的にマルチスレッドではできません。
そこで登場するのが、Workerという概念で、Workeによって、以下のようなマルチ処理を実行できます。
非同期処理のPromise/Async/Await
マルチスレッドで複数の処理を実行したとしても、全てが同じタイミングで終わるわけではありません。
そこで、登場するのが、同期させずに、複数の処理を実行し、すべての処理が終了した後に、同期するための非同期処理です。
JavaScriptでは、非同期処理のオブジェクトであるPromise、ES2017以降に登場するAsync/Awaitという有名な概念になります。
Promiseとは？
メジャーなmdn web docsには、以下の言葉でPromiseを説明されています。
非同期処理の最終的な完了もしくは失敗を表すオブジェクト
非同期処理の結果を完了もしくは失敗というオブジェクトで返してくれるわけで、イメージでは以下の通りとなります。
Promiseは、複数の処理をつなぎ合わせることができます。
例えば、上記の図の場合、処理の塊を2つか3つ連続して、処理した後に、結果オブジェクトを戻り値として、返すこともできます。
繋ぎ合わせて、行うことで、複数の処理を同期させずに結果を導き出せるのです。
Async/Awaitとは？
Promiseをベースとした非同期処理となります。
An async function is a function declared with the async keyword, and the await keyword is permitted within it. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.
Asyncは、関数で非同期処理をしますよというアナウンスを行います。
一方で、Awaitは、Async内で実行できる非同期処理となります。
インターネット上なども含めて、先輩エンジニアたちが、AsyncとAwaitを理解するためには、Promiseを理解する必要があるということを言われていました。
実際に、ドキュメントを読んで整理して、書き出してみると、確かに、納得できました。
簡単ですが、頭の整理で記事を書いてみました。
間違っているや指摘などございましたら、言っていただけると幸いです！！