Promise の基本プロセスについて図でまとめる

記事目安...5分

はじめに

javascript, nodejs の 非同期処理を行う、Promise のプロセスについてのまとめです。

遷移図

黒色の四角は、実行される関数を、
水色の四角は、Promise のステータスを表します。

Promise のステータス

• appending: Promise の初期の状態、もしくは実行中の状態
• fulfilled: resolve() メソッドが呼び出されて、処理が正常に完了した状態。
• rejected: rejected() メソッドが呼び出されて、処理が失敗した状態

プロセス分岐の解説

Promise のプロセスは、ステータス遷移後3パターンに分岐します。

①fulfilled ステータスから then() メソッドを実行する

fulfilled ステータスから、Promise.prototype.then(onFulfilled[, onRejected]) メソッドを実行できます。

これにより、引数の onFulfilled に書いた関数で、後続の処理を行うことができます。

参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

②rejected ステータスから then()メソッドを実行する

rejected ステータスから、Promise.prototype.then(onFulfilled[, onRejected]) メソッドを実行できます。

rejected ステータスの場合、引数の onRejected に書いた関数が、後続の処理として呼び出されます。

エラー時の処理を行いたいときに利用します。

③rejected ステータスから catch() メソッドを実行する

rejected ステータスから、 Promise.prototype.catch() メソッドを実行できます。

Promise.prototype.catch() メソッドの呼び出しは、裏側的には Promise.prototype.then(onRejected]) が呼び出された時と同じ挙動をするみたいです。用途も基本的に同じです。

参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch

参考

https://rightcode.co.jp/blog/information-technology/javascript-async-await