https://idea-hack.com/courses/lets-learn-the-timing-to-control-the-processing-timing-with-javascript/lessons/basic-concept-of-promise-object-that-implements-asynchronous-processing-in-javascript/
https://idea-hack.com/courses/lets-learn-the-timing-to-control-the-processing-timing-with-javascript/lessons/basic-concept-of-promise-object-that-implements-asynchronous-processing-in-javascript/

JavaScriptで非同期処理を実装するPromiseオブジェクトの基本概念

JavaScriptで非同期処理を実装するPromiseオブジェクトの使い方

JavaScriptで非同期処理を実装するにはPromiseオブジェクトを利用します。

Promiseを利用すると非同期処理が扱いやすくなり、コードの可読性も上昇します。

fetch()メソッドなど、ブラウザー標準の機能にもPromiseは取り入れられており、await・async属性などの記述方法の基本になっているので、習得しておくと良いでしょう。

オブジェクト

オブジェクト意味返り値
new Promise(関数)Promiseを作成するPromiseインスタンス
resolve(引数)Promiseインスタンス内で利用され、非同期処理の終了(成功)を宣言するメソッド。Promiseインスタンス.then(関数)の関数に対して引数の値を渡すことができる。なし
reject(引数)Promiseインスタンス内で利用され、非同期処理の終了(失敗)を宣言するメソッド。Promiseインスタンス.catch(関数)の関数に対して引数の値を渡すことができる。なし
Promiseインスタンス.then(関数)成功した時のコールバック関数を呼び出し実行Promise
Promiseインスタンス.catch(関数)失敗した時のコールバック関数を呼び出し実行Promise
Promise.all(配列)複数のPromiseを並列に実行するPromise
Promiseオブジェクトの仕様

Promiseのコンストラクターの引数(new Promise(関数)の関数部分)には非同期処理を行う関数を指定します。

処理の成功・失敗時の処理の場合分け

Promiseオブジェクトは、処理が成功した時と失敗した時に別々の関数を実行する機能を持っています。

成功時・失敗時それぞれの流れは下記の通りです。

補足

処理の成功・失敗の判定処理は自然に行われる物ではなく、私たちが判定を下すということに注意してください。

処理が成功した時はresolve()メソッドを呼び出し、処理が失敗した時はreject()メソッドを呼び出すことで、処理の失敗と成功のいずれかなのかをPromiseインスタンスに伝えることが必要です。

処理が成功した時

非同期処理の完了した物として処理を行いたい場合は、resolve()メソッドを呼び出し、処理が成功した物として認識させます。

そして、Promiseインスタンス.then(関数)を定義しておくことで、resolve()メソッドが呼ばれた段階で後に続けたい関数を実行させることができます。

また、resolve()メソッドに引数を渡しておくと、それはPromiseインスタンス.then(関数)に渡されます。

まとめると、処理が成功した時のPromiseの挙動は次のようなフローになります。

  1. new Promise(関数)でインスタンスを作成して、引数の関数の非同期処理を開始
  2. 非同期処理されている関数で、resolve()メソッドを呼び出し、非同期処理が成功して終了したものと判定する。またそれをPromiseインスタンスに伝える。
  3. 非同期処理が成功して終了しているので、Promiseインスタンス.then(関数)の形で追加関数が定義されていれば、それを実行する

処理が失敗した時

非同期処理の失敗した物として処理を行いたい場合は、reject()メソッドを呼び出し、処理は失敗した物として認識させます。

そして、Promiseインスタンス.catch(関数)を定義しておくことで、reject()メソッドが呼ばれた段階で後に続けたい関数を実行させることができます。

また、reject()メソッドに引数を渡しておくと、それはPromiseインスタンスcatch(関数)に渡されます。

まとめると、処理が成功した時のPromiseの挙動は次のようなフローになります。

  1. new Promise(関数)でインスタンスを作成して、引数の関数の非同期処理を開始
  2. 非同期処理されている関数で、reject()メソッドを呼び出し、非同期処理が失敗して終了したものと判定する。また、それをPromiseインスタンスに伝える。
  3. 非同期処理が失敗して終了しているので、Promiseインスタンス.catch(関数)の形で追加関数が定義されていれば、それを実行する
インストラクター