JavaScript

【JavaScript】Promiseのthenの基本的な使い方

どうも、つよぽんです!

今回は、「JavaScriptのPromiseのthenメソッドの使い方」について解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • JavaScriptのPromiseでデータの受け渡す方法を知りたい
  • JavaScriptのPromiseのthenメソッドを使えるようになりたい

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • JavaScriptのPromiseでデータの受け渡す方法がわかる
  • JavaScriptのPromiseのthenメソッドを使えるようになる

今回の記事の内容は以下のスライドの解説記事となっております。今回の解説記事と以下のスライド記事をあわせて使うことでより深く学習できます。

あわせて読みたい
【JavaScript】Promiseのthenメソッドの使い方JavaScriptのPromiseオブジェクトのthenメソッドの使い方を学習します。この記事を読むことで①メソッドチェーンでthenを記述する方法、②then経由で値を受け渡す方法、③then内で非同期処理を行いたいときの実装方法が学べます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. Promiseのthenメソッドとは
  2. Promiseのthenメソッドの挙動をサンプルコードで確認する

Promiseのthenメソッドとは

非同期処理でresolve(=成功)した後に実行される

Promiseは一般的に非同期処理を実装する際に使われます。

そして、非同期処理を終えたタイミングで、実行した処理がある場合に、今回解説する「then」メソッドを使います。

このthenメソッドはPromiseオブジェクトのメソッドになります。

使い方は「Promiseオブジェクト.then(コールバック関数)」のように記述します。

このthenメソッドにセットしたコールバック関数は、Promiseオブジェクトがresolveな状態(=成功した状態)になって初めて実行されるので、resolveにならなければコールバック関数は実行されません。

具体的にthenメソッドがどのように動くかは次の章「Promiseのthenメソッドの挙動をサンプルコードで確認する」で説明します。

resolve(=成功)とは反対の概念でreject(=失敗)があることを、前回記事「【JavaScript】Promiseオブジェクトの作成【2通り】」で説明しました。

reject(=失敗)になったときは、thenメソッドの代わりにcatchメソッドが使われます。(catchメソッドに関しては別記事「【JavaScript】Promiseのcatchの使い方」で紹介)

thenメソッドはPromiseオブジェクトを戻り値とするためメソッドチェーンが出来る

まず、メソッドチェーンを知らない方のためにメソッドのチェーンの簡単な説明をしたいと思います。

メソッドチェーンとは、「object.method().method().method()」のようにメソッドを数珠つなぎで実装したコードとなります。

このメソッドチェーンとPromiseのthenメソッドにはどんな関係があるのでしょうか?

実は、Promiseのthenメソッドは戻り値にPromiseオブジェクトを返します。

つまり、戻り値がPromiseオブジェクトなので、その戻り値に対してthenメソッドを実行することが出来るということです。

実際にサンプルコードを見たほうがイメージがつきやすいかと思うので、下の画像内のサンプルコードを確認していただけたらと思います。

thenメソッドをメソッドチェーンで記述したサンプルコードthenメソッドをメソッドチェーンで記述したサンプルコード

上の画像で使われているサンプルコードは以下のリンク先から直接確認できます。

Promiseのメソッドチェーンのサンプルコード

画像内のコードのように「promise.then().then().then()…」とthenメソッドを繋げたいだけ繋げて実装することが出来るのです。

具体的にthenメソッドがどのように動くかは次の章「Promiseのthenメソッドの挙動をサンプルコードで確認する」で説明します。

Promiseのthenメソッドの挙動をサンプルコードで確認する

実際にPromiseのthenの挙動を確認するために、下の画像を使いながら説明していきます。

thenメソッドを使ったサンプルコードthenメソッドを使ったサンプルコード

上の画像で使われているサンプルコードは以下のリンク先から直接確認できます。

Promiseのthenメソッド内のreturnの挙動チェックその1

Promiseでresolveした時、複数のthenメソッドをメソッドチェーンで記述したときのコードの流れは次のようになります。

コードの流れ
  1. 1番最初のthenメソッドにセットしたコールバック関数はPromiseオブジェクトがresolveしたタイミングで実行される。このとき、resolveの引数に値をセットしている場合は、thenメソッドのコールバック関数の引数に値が渡る
  2. 1番目のthenメソッド内の処理が終了したら、2番目のthenメソッドが実行される。この時、1番目のthenメソッド内でreturnした値は、2番目のthenメソッドにセットしたコールバック関数の引数に渡る
  3. 2番目のthenメソッドと3番目のthenメソッドの関係もも②と同じで、2番目のthenメソッド内の処理が完了し、returnにセット値を3番目のthenメソッドのコールバック関数の引数に渡す
  4. 3番目のthenメソッド内の処理が完了したら、今までと同じように次のthenメソッドにセットしたコールバック関数が実行される。しかし、3番目のthenメソッド内の処理ではreturnを使っていないため、4番目のthenメソッドのコールバック関数の引数には何も値が渡ってこない。(出力内容をみるとundefinedとなっているのがわかる)

Promiseのresolveとthenメソッドは、上記にまとめたように、セットした順番で実行されていきます。

そして、thenメソッド同士で値の受け渡しを行いたい場合は、thenメソッドのコールバック関数内でreturnに渡したい値をセットすることで、次のthenメソッドのコールバック関数の引数に値を渡すことが出来る。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • PromiseのthenメソッドはPromiseオブジェクトを戻り値とするので、thenメソッドを連続で実行することが出来る(メソッドチェーン)
  • thenメソッドはコールバック関数をセットする
  • thenメソッドにセットしたコールバック関数は、直前のPromiseオブジェクトがresolveな状態になったら実行される
  • thenメソッドにセットするコールバック関数の引数を使って、データの受け渡しが出来る
  • thenメソッド内のコールバック関数から、次のthenメソッドのコールバック関数にデータを渡したい場合は、returnを使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
【JavaScript】Promiseのthenメソッドの使い方JavaScriptのPromiseオブジェクトのthenメソッドの使い方を学習します。この記事を読むことで①メソッドチェーンでthenを記述する方法、②then経由で値を受け渡す方法、③then内で非同期処理を行いたいときの実装方法が学べます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です