Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】Promise::Promise.prototype.thenインスタンスメソッドの使い方

Promise.prototype.then()インスタンスメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

Promise.prototype.then()メソッドは、Promiseオブジェクトの非同期処理が完了した後に実行されるコールバック関数を登録するメソッドです。Promiseは、データの取得やファイルの読み込みといった時間のかかる処理(非同期処理)の最終的な成功または失敗、そしてその結果の値を表現するオブジェクトです。このthen()メソッドを使用することで、Promiseが成功した場合(「解決された」状態)にどのような処理を行うか、また、失敗した場合(「拒否された」状態)にどのようなエラー処理を行うかを明確に定義できます。

then()メソッドは、二つのオプション引数を受け取ります。第一引数(onFulfilled)は、Promiseが成功して解決されたときに呼び出される関数で、成功した結果の値がこの関数の引数として渡されます。第二引数(onRejected)は、Promiseがエラーによって拒否されたときに呼び出される関数で、エラーの原因が引数として渡されます。どちらの関数も省略することが可能ですが、通常は少なくともonFulfilled関数を指定します。

then()メソッド自身も新しいPromiseオブジェクトを返します。この特性により、ある非同期処理の結果を受けて次の非同期処理を実行するといった、一連の処理を順番に繋げる「Promiseチェーン」を簡単に構築できます。これにより、非同期処理が複数連携する複雑なシステム開発において、コードの可読性と保守性を高めることができます。非同期処理の完了を待って次の処理を進める必要があるシステム開発において、then()メソッドは不可欠な機能の一つです。

公式リファレンス: Promise.prototype.then()

構文(syntax)

1Promise.resolve("成功時の値").then(
2  (value) => {
3    console.log("成功:", value);
4  },
5  (reason) => {
6    console.error("失敗:", reason);
7  }
8);

引数(parameters)

onFulfilled, onRejected

  • onFulfilled: Promiseが成功した(fulfilled)場合に実行されるコールバック関数。引数としてPromiseの値を受け取ります。
  • onRejected: Promiseが失敗した(rejected)場合に実行されるコールバック関数。引数としてPromiseのエラーを受け取ります。

戻り値(return)

Promise

Promise.prototype.then() は、現在の Promise が成功したか失敗したかの結果を受け取り、それを基に新しい Promise を返します。

関連コンテンツ