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

2020-09-01 2020-09-09

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の挙動は次のようなフローになります。

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

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

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

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

投稿者

KAZU

「Webデザインとプログラミングを独学 → 独自プロダクトとサブスクリプションサービスの構築 → 学習内容をコースとして提供」を繰り返しながら企業でも働く兼業ディベロッパーです。