编程模式可以压缩嵌套的ajax回调?

chi*_*org 6 javascript ajax jquery callback

我继承了JavaScript代码,其中Ajax处理程序的成功回调启动另一个Ajax调用,其中成功回调可能会也可能不会启动另一个Ajax调用.这导致了深层嵌套的匿名函数.也许有一个聪明的编程模式,避免深度嵌套,更干.此外,还存在整个函数中使用的内部变量myVar1和myVar2的问题.

jQuery.extend(Application.Model.prototype, {
    process: function() {
        var myVar1;
        // processing using myVar1;
        jQuery.ajax({
            url:myurl1,
            dataType:'json',
            success:function(data) {
                var myVar2;
                // process data using myVar1, set state of myVar2,
                // then send it back
                jQuery.ajax({
                    url:myurl2,
                    dataType:'json',
                    success:function(data) {
                        // do stuff with myVar1 and myVar2
                        if(!data.ok) {
                            jQuery.ajax({
                                url:myurl2,
                                dataType:'json',
                                success:mycallback
                            });
                        }
                        else {
                            mycallback(data);
                            }

                    }
                });
            }
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

cpa*_*mer 9

不需要所有回调都是匿名的并且内联定义,您可以在其他地方声明它们,并在指定回调时使用函数名称.


chi*_*org 3

感谢链接提示和此评论,我得出了以下解决方案。我已经测试过它并且有效。可能存在一些范围问题,您可以从中重构一个通用的 ChainAjax 类。但就目前而言,这还可以。

jQuery.extend(MyApplication.Model.prototype, {
    process: function() {

        // private class for executing the Ajax calls
        var myAjaxCalls = function(options) {
          this.options = options;
          this.myVar1 = null;
          this.myVar2 =null;                
        }
        jQuery.extend(myAjaxCalls.prototype, {
          process1:function(data) {
            // processsing using this.myVar1
            this.myVar1 = 5;
            return true;
          },
          process2:function(data) {
            this.myVar2 = 6;    
            if(data.ok) {
                mycallback(data);
            }
            else {
                return true;
            }
          },
          process3:function(data) {
            // Process this.myVar1 and this.myVar 
            mycallback(data);
            return false;
          },
          chainAjax:function() {
            if(this.options.length > 0) {
              var opt = this.options.shift();
              var that = this;
              jQuery.ajax({
                url:opt.url,
                success:function(data) {
                  if(that[opt.callback](data)) {
                          that.chainAjax();
                  }
                }
              });
            }
          }
        });
        // End private class

        var calls = new myAjaxCalls([
            {url:'http://localhost/', callback:'process1'},
            {url:'http://localhost/', callback:'process2'},
            {url:'http://localhost/', callback:'process3'}
        ]);
        calls.chainAjax();
    }
});
Run Code Online (Sandbox Code Playgroud)

更新:我发现这个很好的演示文稿还涉及有用的编程模式和最佳实践。

2012 更新:与此同时,有几个库可用于使用异步函数模拟同步流程:qstratified.jsStreamline.js