jQueryの延期を使用する

Question

jQueryの延期について読んでいますが、使用方法を十分に理解できません。

私は各Repository.Projects.*方法は、データを取得するための非同期呼び出しが含まれている次深くネストされたコード

Repository.Projects.GetStages(function (data) { 
    var stagesXml = $.parseXML(data.d); 

    Repository.Projects.GetBenefits(function (data) { 
     var benefitsXml = $.parseXML(data.d); 

     Repository.Projects.GetPriorities(function (data) { 
      var prioritiesXml = $.parseXML(data.d); 

      Repository.Projects.GetDifficulties(function (data) { 
       var difficultiesXml = $.parseXML(data.d); 

       Repository.Projects.GetFactors(function (data) { 
        var factorsXml = $.parseXML(data.d); 

        Repository.Projects.GetRatings(function (data) { 
         var ratingsXml = $.parseXML(data.d); 

         Repository.Projects.GetProjectRatings(selectedPersonIdEncrypted, passDate, function (data) { 
          var dataDoc = UTL.Utility.prototype.setDomDocument(data.d); 
          var xsltDoc = UTL.Utility.prototype.setXslt("Xslt/UserRating/ProjectRatings.xslt"); 
          var html = UTL.Utility.prototype.transform(dataDoc, xsltDoc, [ 
           ['stages', stagesXml], 
           ['benefits', benefitsXml], 
           ['priorities', prioritiesXml], 
           ['difficulties', difficultiesXml], 
           ['factors', factorsXml], 
           ['ratings', ratingsXml] 
          ]); 

          $('#Project', $content).html(html); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

を持っています。渡された関数はコールバックであり、成功した結果のデータが渡されます。リポジトリはジェネリック関数でエラーを処理するので、エラー関数を渡す必要はありません。 xslt変換の前に、これらのそれぞれが呼び出され、データが返されるようにする必要があります。 Repository.Projects.*すべてで

方法は、この

GetStages: function (successCallback) { 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "DataRepository.asmx/GetStages", 
     cache: false, 
     data: JSON.stringify({}), 
     dataType: "json", 
     success: successCallback, 
     error: Repository.FailureCallback 
    }); 
} 

のように見える私がこれを書き換えることができるはずのように、私はどのように見ることができないようです。

Answer 1

Repository.Projects.*の下にあるすべての関数は、$.ajax呼び出しを返します（それ自体は遅延インスタンスを返します）。

GetStages: function() { 
    return $.ajax(...); 
} 

は、その後、あなたはこのコードを使用することができます：

$.when(
    Repository.Projects.GetStages() 
    ,Repository.Projects.GetBenefits() 
    ,Repository.Projects.GetPriorities() 
    ,Repository.Projects.GetDifficulties() 
    ,Repository.Projects.GetFactors() 
    ,Repository.Projects.GetRatings() 
) 
    .then(done, fail) 
; 

// success function 
function done(stageResponse, benefitResponse, ...) { 
    /* 
    each param is the success callback from jquery.ajax.success 
    arguments are [ data, textStatus, jqXHR ] 
    */ 
    var 
    stageXML = $.parseXML(stageResponse[0].d) 
    ,benefitXML = $.parseXML(benefitResponse[0].d) 
    ... 
    ; 

    Repository.Projects.GetProjectRatings(...) 
} 

// error function 
function fail() { } 

EDIT：あなたは、自分の繰延オブジェクトとRepository.Projects.*をラップすることによって、このクリーナーを作ることができる

。

function extractResult($ajax) { 
    return $.Deferred(function(dfd) { 
    $ajax 
     .done(function(response) { 
     dfd.resolve(response.d); 
     }) 
     .fail(function(jqXhr) { 
     // pass stuff to the failed function 
     dfd.reject(...); 
     }) 
    ; 
    }).promise(); 
} 

上記のコードでは、クリーンな実装は機能しません。成功関数は、$.parseXMLに渡す必要があるコンテンツのみを受け取ります。だから、done関数の変数を$.parseXML(stageResponse)に変更することができます。

Repository.Projects.Get*の機能だけがmake $.ajaxリクエストであれば、それらを完全に取り除くことができます。

セクシー方法：

$.when.apply($ 
    ,$.map([ 
    // these could be directly replaced with calls to $.ajax(...) 
    Repository.Projects.GetStages() 
    ,Repository.Projects.GetBenefits() 
    ,Repository.Projects.GetPriorities() 
    ,Repository.Projects.GetDifficulties() 
    ,Repository.Projects.GetFactors() 
    ,Repository.Projects.GetRatings() 
    ], exctractResult) 
) 
    .done(function(stageResponse, benefitResponse, ...) { 
    var 
     stageXML = $.parseXML(stageResponse) 
     ,benefitXML = $.parseXML(benefitResponse) 
     ... 
    ; 

    ... 
    }) 
;