Jquery Promise 和 Defered 并返回结果答案

【问题标题】：Jquery Promise and Defered with returned resultsJquery Promise 和 Defered 并返回结果
【发布时间】：2016-04-30 06:55:41
【问题描述】：

我正在使用 Backbone.js，并且我有许多事件，这些事件会产生选项对象的设置，这些事件发生在我的路由器中。被调用的视图需要这些对象，因此它们必须在创建视图之前完成。问题是这些发生的事件是 ajax 并且是异步的，所以它们在视图显示之前不会完成。我尝试使事件同步，但这会导致其他问题，例如冻结 gui。所以，我试图链接我的函数，以便在调用所有函数之前创建视图。但是，这对我不起作用，因为我似乎无法弄清楚如何在延迟调用之间传递数据。这是我所拥有的：

Router.js：

someParentFunction:function(paramA, paramB){
     var that = this;
     var defer1 = $.when(
        $.get(that.functionA('somedata1','somedata2',that))
     );
      defer1.done(function () {
          var defer2 = $.when(
              $.get(that.functionB('someData',that))
          );
          defer2.done(function (data) {
              var defer3 = $.when(
                 $.get(that.functionC('somedata1',that))
               );
               defer3.done(function (data) {
               //how do I get the results from each Deferred function?
               //keeling in mind that each deferred function 
               //also receives parameters.
               //also, the order of the other functions does not matter,
               //as long as they all return their values before this 
               //view is created.
               that.view = new ProjectView({
                  someParam1:paramA,
                  someParam2:paramB,                      
                  resultsA: jQuery.parseJSON(defer1.results),
                  resultsB: jQuery.parseJSON(defer2.results),
                  resultsC: jQuery.parseJSON(defer3.results),

                 }),

                 window.app.page(that.view, {
                       tab:'someName',                          
                 })

               });
          });

      });
}

functionA: function(param1, param2){
  var url = '?q=somestring&' + param1 + '&' + param2 ;
  return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            );
            }
            }).success(function( data ) {               
            }).responseText;
    },
functionB: function(param1, context){
  var url = '?q=somestring&' + param1  ;
  return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            );
            }
            }).success(function( data ) {               
            }).responseText;
    },
functionC: function(param1, context){
  var url = '?q=somestring&' + param1;
  return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            );
            }
            }).success(function( data ) {               
            }).responseText;
    },

【问题讨论】：

检查functionX 函数。它们都有相同的语法错误。
无需将单个$.ajax 包装在$.when 中。只需添加额外的代码。 $.ajax 已经返回了一个承诺
以上代码只是伪代码

标签： jquery ajax backbone.js jquery-deferred

【解决方案1】：

经过一段时间的研究，我发现这是可行的：

       var that = this
       $.when(
            that.functionA(param1,that) ,
            that.functionB(param1,that)  ,
            that.functionC(that)  ,
            that.functionD(param1,that)  ,
            that.functionE(param1,that) ,
            that.functionF(param1,that, param2)
        ).done(function( a1, a2 , a3, a4, a5, a6) {
            var response1 = jQuery.parseJSON(a1[0].result.results);
            var response2 = jQuery.parseJSON(a2[0].result.results);
            var response3 = jQuery.parseJSON(a3[0].result.results);
            var response4 = jQuery.parseJSON(a4[0].result.results);
            var response5 = jQuery.parseJSON(a5[0].result.results);
            var response6 = jQuery.parseJSON(a6[0].result.results);

            that.view = new MyView({
                someParam:param1,
                anotherParam:param2,                    
                r1: response1,
                r2: response2,
                r3: response3,
                r4: response4,
                r5: response5,
                r6: response6
            }),

            window.app.page(that.view, {
                tab:'someValue',           
            })
    });

然后每个函数的结构如下：

functionA: function(param1, context){
        var url = '?q=myApp/api/general_functions/&param1=' + param1;
        return  $.ajax({
            url: url,
            context: context,
            beforeSend: function( xhr ) {
            }
        }).success(function( data ) {
        });
    },

这确保了包装在 .when 方法中的每个函数在到达 .done 方法之前完成。

希望这对其他人有所帮助。

【讨论】：