JavaScript Promiseを使用するサンプル

JavaScriptのPromiseオブジェクトを使用するサンプルです。

サンプル	Promiseとは
	fulfilled(成功)を返す場合
	rejected(失敗)を返す場合
	fulfilled(成功)とrejected(失敗)で処理を切り分ける
	thenは複数書ける(メソッドチェーン)
	並行して実行する(Promise.all)
	どれか１つの処理が完了したら(Promise.race)

Promiseとは

JavaScriptにある機能で、Promiseオブジェクトを生成して使用します。
resolveでオブジェクトの状態をfulfilled(成功)にします。
rejectでオブジェクトの状態を却下rejected(失敗)にします。
メソッドの呼び出し側は、その結果を受けて処理を切り分けて記述できます。
オブジェクトがfulfilled(成功)の場合thenで受けます。
オブジェクトがrejected(失敗)の場合catchで受けます。
finallyは常に実行します。
ECMAScript 2015(ES6)で導入されました。
以下は、MDNの「Promiseを使う」のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

fulfilled(成功)を返す場合　

<script>
  function test1() {
    return new Promise((resolve) => {
      resolve("OK");
    });
  }
  test1()
    .then((str1) => {
      console.log(str1); // OKが出力される
  });
</script>

処理の流れは、7行目から2行目の関数が実行された後に8行目以下が実行されます。

3行目は、Promiseの前にnewがありPromiseオブジェクトを生成しています。
更にその前にreturnがあるので生成されたPromiseオブジェクトを返します。
4行目は、resolveがあるのでPromiseオブジェクトはfulfilled(成功)の状態です。

fulfilled(成功)の時は8行目のようにthenで受けます。

rejected(失敗)を返す場合　

<script>
  function test1() {
    return new Promise((resolve,reject) => {
      reject("NG");
    });
  }
  test1()
    .catch((str1) => {
      console.log(str1); // NGが出力される
  });
</script>

処理の流れは、resolvedの時と同じです。
4行目は、rejectがあるのでPromiseオブジェクトはrejected(失敗)の状態です。
rejected(失敗)の時は8行目のようにcatchで受けます。

fulfilled(成功)とrejected(失敗)で処理を切り分ける

<script>
  function test1() {
    const a = 1;
    return new Promise((resolve, reject) => {
      if (a === 1) { // 何らかの処理のイメージ
        resolve("OK"); //成功の場合
      } else {
        reject("NG"); //失敗の場合
      }
    });
  }
  test1()
    .then((str1) => {
      console.log(str1); //
    })
    .catch((str1) => {
      console.log(str1); //
    })
    .finally((str1) => {
      console.log("finally"); //常に出力される
    });
</script>

resolveとrejectを使用するイメージです。
5行目以降は、通信等の何らかの処理があって成功の場合fulfilled(成功)を返し失敗の場合rejected(失敗)を返すイメージです。
その結果を受けて、12行目からのメソッド呼び出し側は成功時(then)と失敗時(catch)の処理を分けておくことができます。
19行目のfinallyは成功失敗に関わらず常に実行されます。

thenは複数書ける(メソッドチェーン)

<script>
  function test1() {
    return new Promise((resolve,reject) => {
      resolve("OK");
    });
  }
  test1()
    .then((str1) => {
      console.log("123"); // 123が出力される
    })
    .then((str1) => {
      console.log("abc"); // abcが出力される
    })
    .catch((str1) => {
      console.log("NG"); //出力されない
    });
</script>

8,11行目のようにthenを複数続けて書けます。
その場合、8行目の処理がおわったら11行目というように順番に実行されます。

並行して実行する(Promise.all)

<script>
  function test1(num1) {
    console.log(num1);
    return new Promise((resolve) => {
      resolve("OK");
    });
  }
  Promise.all([
		test1(1),
		test1(2),
		test1(3)
		])
    .then((str1) => {
      console.log(str1); // OKが出力される
    })
    .catch((str1) => {
      console.log("NG"); //
    });
</script>

8行目は、Promise.allです。
この場合、9～11行目の関数は並行して実行されます。

以下は、実行結果のイメージです。
3つ全て成功でthenが実行されます。1つでも失敗するとcatchが実行されます。
全てfulfilled(成功)の時は、以下のように配列で返ります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

どれか１つの処理が完了したら (Promise.race)

<script>
  function test1(num1) {
    console.log(num1);
    return new Promise((resolve) => {
      resolve("OK");
    });
  }
  Promise.race([
			test1(1),
			test1(2),
			test1(3)
		])
    .then((str1) => {
      console.log(str1); // OKが出力される
    })
</script>

8行目は、Promise.raceです。
この場合、9～11行目の関数のどれか1つの処理が完了したら結果を返します。

以下は、実行結果のイメージです。結果は1つ返ってきます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/race