jQuery Deferredを使用するサンプル

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

サンプル	Deferredとは
	resolved(解決した)を返す場合
	rejected(却下された)を返す場合
	resolveとrejectで処理を切り分けるイメージ
	thenは複数書ける(メソッドチェーン)
	並行して実行する($.when)

Deferredとは

jQueryにある機能で、Deferredオブジェクトを生成して使用します。
resolveでオブジェクトの状態を解決済み(resolved)にします。
rejectでオブジェクトの状態を棄却済み(rejected)にします。
メソッドの呼び出し側は、その結果を受けて処理を切り分けて記述できます。
オブジェクトが解決済み(resolved)の場合thenまたはdoneで受けます。
オブジェクトが棄却済み(rejected)の場合failで受けます。
alwaysは常に実行します。
以下はjQueryのDeferredのリンクです。
http://api.jquery.com/jQuery.Deferred/

resolved(解決した)を返す場合

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  function test1() {
    const df = $.Deferred();
    df.resolve("OK"); //解決
    return df.promise();
  }
  const promise1 = test1();
  promise1
    .then(function (str1) {
      console.log(str1); // OKが出力される
    });
</script>

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

4行目は、Deferredオブジェクトを生成しています。
5行目は、resolveにしています。
6行目は、returnでresolved(解決した)の状態のオブジェクトを返します。

10行目は、thenで受けています。

rejected(却下された)を返す場合

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  function test1() {
    const df = $.Deferred();
    df.reject(); //却下
    return df.promise();
  }
  const promise1 = test1();
  promise1
    .then(function () {
      console.log("OK"); //
    })
    .fail(function () {
      console.log("NG"); // NGが出力される
    });
</script>

処理の流れは、resolvedの時と同じです。
5行目は、rejectがあるのでオブジェクトはrejected(却下された)の状態です。
13行目は、failで受けています。

resolveとrejectで処理を切り分けるイメージ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  function test1() {
    const df = $.Deferred();
    if (a === 1) {// 何らかの処理のイメージ
      df.resolve("OK"); //成功の場合resolvedを返す
    } else {
      df.reject("NG"); //失敗の場合rejectedを返す
    }
    return df.promise();
  }
  const promise1 = test1();
  promise1
    .then(function (str1) {
      console.log(str1); //
    })
    .fail(function (str1) {
      console.log(str1); //
    })
    .always(function (str1) {
      console.log("always"); //常に出力される
    });
</script>

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  function test1() {
    const df = $.Deferred();
    df.resolve();
    return df.promise();
  }
  const promise1 = test1();
  promise1
    .then(function (str1) {
      console.log("123"); // 123が出力される
    })
    .then(function (str1) {
      console.log("abc"); // abcが出力される
    })
    .fail(function () {
      console.log("NG"); //出力されない
    });
</script>

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

並行して実行する($.when)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  function test1(num1) {
    console.log(num1);
    const df = $.Deferred();
    df.resolve();
    return df.promise();
  }
  $.when(
    test1(1), 
    test1(2), 
    test1(3)
    )
    .then(function () {
      console.log("OK"); // OKが出力される
    })
    .fail(function () {
      console.log("NG"); //出力されない
    });
</script>

9行目は、$.whenです。
この場合、10～12行目の関数は並行して実行されます。
3つ全て成功でthenが実行されます。1つでも失敗するとfailが実行されます。

以下は、実行結果のイメージです。

https://api.jquery.com/jQuery.when/