jQuery無双

jQueryをとことん使いこなす！ jQuery1.12対応。使い方、入門、サンプル、ノウハウをとことん極めた最強ブログ。

Deferredその２：deferred.state()、resolve()、reject()、done()、fail()を検証してみる

      2016/05/07

deferred.state()、resolve()、reject()、done()、fail()を検証してみる

前の記事で、Deferred使う事の理由を述べましたが、具体的な使い方を書いて行こうと思います。
今回はstate()状態について、そしてその状態による分岐、主なdeferred検証観点はstate()、resolve()、reject()、done()、fail()を使用。

なお、jQueryバージョン1.7まではisResolvedとisRejectedというメソッドがありましたが、1.8からは廃止となりました。
deferred.state()を使っていくものとします。

一般的な単語としてのpendingは「保留」、rejectは「拒否」という言葉が良く思い浮かびますが、
jQuery.Deferredにおいては「未解決」というニュアンスが強いので「未解決」という言葉を使っていきます。同じ理由としてrejectの「拒否」についても「却下」という言葉を使っていきます。

deferred状態の検証サンプルコード

文章だけでは、やはり分かりにくいのでdeferredサンプルコードをもとに説明していきます。

state()、resolve()、reject()、done()、fail()のjQueryサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
    var msg;
    
    // Deferredオブジェクト作成
    var defer_1 = new $.Deferred;

    // [1]
    // .state()
    msg = "[1]Deferredオブジェクト作成直後に.state()：" + defer_1.state();
    $("ul").append("<li>" + msg + "</li>");
    
    // .resolve()
    defer_1.resolve();
   
    // [2]
    // .resolve()での.state()
    msg = "[2].resolve()をした後での.state()：" + defer_1.state();
    $("ul").append("<li>" + msg + "</li>");
    
    
    // [3]
    // .resolve() - .done(data)
    // .done(data)の受取り値は何もないのでundefined
    defer_1.done(function(data){
      msg = "[3]resolve()での.done(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // [4]
    // .resolve() - .promise().done(data)
    // プロミスの.done(data)でも当然undefined
    defer_1.promise().done(function(data){
      msg = "[4]resolve()での.promise().done(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // [5]
    // .resolve() - .fail(data)
    // .resolve()をしたので、.fail(data)自体実行されない
    defer_1.fail(function(data){
      msg = "[5]resolve()での.fail(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // [6]
    // .resolve() - .promise().fail(data)
    // プロミスからも当然、.fail(data)自体実行されない
    defer_1.promise().fail(function(data){
      msg = "[6]resolve()での.promise().fail(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // ここで.resolve()をもう一回してみる、今度は引数付き。
    defer_1.resolve("resolve()２回目の引数");

    // [7]
    // .resolve() - resolve(data) - .done(data)
    // ２回目の.resolve(data)で引数を付けても、１回目で付けてない場合はundefined
    defer_1.done(function(data){
      msg = "[7]resolve() - resolve(data)での.done(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // [8]
    // .resolve() - resolve(data) - .promise().done(data)
    // プロミスの.done(data)でも１回目のresolve()で引数を与えないと、２回目で与えてもundefined
    defer_1.promise().done(function(data){
      msg = "[8]resolve() - .resolve(data)での.promise().done(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // .resolve() をした後に .reject()
    defer_1.reject();

    // [9]
    // .resolve() - .reject() - .state()
    msg = "[9].resolve()をした後でさらに.reject()をして.state()：" + defer_1.state();
    $("ul").append("<li>" + msg + "</li>");

    // Deferredオブジェクト作成
    var defer_2 = new $.Deferred;

    // .reject()
    defer_2.reject("reject()の引数");
   
    // [10]
    // .reject()での.state()
    msg = "[10].reject()をした後での.state()：" + defer_2.state();
    $("ul").append("<li>" + msg + "</li>");

    // [11]
    // .reject() - .done(data)
    // .reject()をしたので、.done(data)自体実行されない
    defer_1.done(function(data){
      msg = "[11]reject()での.done(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

    // [12]
    // .reject() - .fail(data)
    // .reject()をしたので、.fail(data)が実行される
    defer_1.fail(function(data){
      msg = "[12]reject()での.fail(data)での受取り値：" + data;
      $("ul").append("<li>" + msg + "</li>");
    })

});
</script>
</head>
<body>
  <ul>
  </ul>
</body>
</html>
　

※state()、resolve()、reject()、done()、fail()のjQueryサンプルの結果と照らし合わせてみると分かりやすいです

[1]Deferredオブジェクト作成直後に.state()の結果は未解決となります

[2].resolve()の後に.state()の結果は解決済みとなります

[3]解決済みなので、Deferredコールバックの移動先は.done()となります、ただし.resolve()の時に引数の指定が何も無かったので、当然.done()で引数は取れず出力結果はundefinedです

[4]プロミスの場合も.resolve()で引数指定してなかったので、やはり結果は[3]と同じ

[5]解決済みなので、Deferredコールバックは.fail()には行きません

[6]プロミスの場合も解決済みになっている事には変わりないので、やはり結果は[5]と同じ

[7]ここで一度.resolve()引数無しにしたDeferredオブジェクトに今度は.resolve()引数有りにしてみるが、１回目で引数を指定していなかったんで、.done()で引数は受け取れず

[8]プロミスの場合も１回目で引数を指定してないと、２回目でも取れない。

[9].resolve()の後に.reject()、つまり解決済みの後に却下をして解決済みものまま。

[10]新規Deferredオブジェクト作成直後に.reject()をすれば、状態は却下となる。

[11]却下なので、Deferredコールバックは.done()には行きません

[12]却下なので、Deferredコールバックはの移動先は.fail()となり、.reject()で引数を指定しているので、引数の値を受けとる事が出来ます

state()、resolve()、reject()、done()、fail()のjQueryサンプルの結果

jquery,deferred,state,resolve,reject,done,fail,サンプル,非同期通信

　

これらの検証で分かる事は、一度.resolve()や.reject()したDeferredオブジェクトの状態はもう変わらず、引数についても同じという事でしょうか。

 - 非同期通信(ajax) , , , , , , , ,