jqueryのdeferredの詳細

3297 ワード

1、deferredの英語の意味は:延期する
2、deferredの考え:処理に多くのjsデータ要求が発生した場合、同期または非同期の操作が発生する可能性があり、クライアントはずっと待つことができない.この場合、私たちの処理構想はこの要求にコールバックイベントを登録し、サーバーが結果を返したときに実行することである.要するにdeferredはコールバック法の解決策である.
3、物語の背景:
スーパーに行って家電を1台注文すると、スーパーはしばらく在庫がないので別の倉庫から調達する必要があります(この時deferredが発生しました)、到着したらすぐに配送しますが、注文書に貨物の型番、製品の外観、価格などのパラメータを明記する必要があります.貨物を回転させる過程で何か意外なことがあったら(例えば、回転時間が長すぎる)お客様に知らせるべきです(notify、この通知は何度も行われる可能性があります.非同期状態には複数の状態の変化があるからです).約束の出荷時に注文書と一致していることに気づいたら、このpromiseは有効だと思います.受け取りサイン(resolve)、一致しない場合は拒否します. 
4、jqueryのdeferred
このオブジェクトの導入はjqueryの1.5バージョン()で、jqueryを使用する.Deferred()メソッドは、複数のコールバックメソッドをコールバックキューに登録できるチェーン呼び出し可能なツールオブジェクトを作成します.
(1)1.5バージョン前によく使われていたajax形式で、XHRオブジェクトを返し、このバージョン後にdeferredオブジェクトを返します.
$.ajax({
    url: "test.html",
    success: function(){
      alert("success");
    },
    error:function(){
      alert("error");
    }
  });

 
1.5以降も上記の表記はサポートされていますが、1.5以降はチェーン操作が可能です.以下のようにします.
   $.ajax({
    url: '/path/to/file',
    type: '',
    dataType: '',
    data: {},
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})

また、次の形式でリンクメソッドを追加することもできます.
 $.ajax({
    url: '/path/to/file',
    type: '',
    dataType: '',
    data: {},
})
.done(function() {
console.log("first done");
})
.fail(function() {
})
.done(function(){
console.log("second done");
});

このとき、2つのajaxリクエストが戻ってくるまでdone、failメソッドを実行したい場合はどうすればいいですか?
簡単です.
$.when($.ajax("test1.html"), $.ajax("test2.html"))
  .done(function(){ 
alert(「両方のリクエストが成功しました!」); 
});
注意:whenはdeferredオブジェクトを受け入れます
whenの実装原理は、jquery(1.11.1)ソースコードの3340行から3389行を参照することができる.
(2)まだresolve,reject,notifyについては言及していません.焦らないで、すぐに始めましょう.
この問題を明らかにするには、新しい概念「実行状態」を導入しなければならない.
jQueryでは、deferredオブジェクトには、未完了、完了、失敗の3つの実行状態があることを規定しています.
実行ステータスが「完了」(resolved)の場合、deferredオブジェクトの実行ステータスを「未完了」から「完了」に変更すると、deferredオブジェクトはdone()メソッドで指定したコールバック関数をすぐに呼び出します.
実行ステータスが「失敗しました」の場合、fail()メソッドで指定したコールバック関数を呼び出します.
実行ステータスが「未完了」の場合、nodifyメソッドで指定されたコールバック関数がトリガーされます.
例は次のとおりです.
http://jsfiddle.net/houyaowei/0jzL93j2/この例は直ちにdoneメソッドを実行する
http://jsfiddle.net/houyaowei/khgoqnp1/3/ reject
http://jsfiddle.net/houyaowei/ummefcLw/5/ resolve
http://jsfiddle.net/houyaowei/rcocx47a/動的変更resolve
運転状態が動的に変化する問題を処理するためにjQueryはdeferredを提供する.promise()メソッド.元のdeferredオブジェクトに別の新しいdeferredオブジェクト(promise)を返す役割を果たします.
オブジェクトの動作状態は変更できません
promiseは実行状態の変更に関係のない方法(done()メソッドやfail()メソッドなど)のみを開放し、
実行状態の変更に関連するメソッド(resolve()メソッドやreject()メソッドなど)をマスクします.
例は次のとおりです.
http://jsfiddle.net/houyaowei/b4h6we8t/2/ promise
(3)promiseのthenメソッド:
処理の便宜上doneとfailメソッドをthenメソッドに統合し,
  deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
doneFilter:doneの処理方法
オプションパラメータfailFilterが元のfailである処理方法
例:
$.get( "index.html" ).then(
 function() {
alert( " succeeded" );
 }, function() {
alert( " failed!" );
 }
);

詳細なAPIにアクセスしてくださいhttp://api.jquery.com/
レンガを撮ることを歓迎します.もしどこかの説明が不合理だったり、間違っていたりしたら、伝言を残してください.ありがとうございます.