将一系列同步AJAX请求转换为异步请求

Question

如何在异步而不是同步的函数中创建第二个AJAX请求？ result是一个字符串，它应该以'字符串开始'开始并以'字符串结尾'结尾，但在字符串中间将会是迭代的初始AJAX请求的结果。

Foo = { 
    foo: function() { 
     $(document).on("change", '.foo', function(e) { 
      e.preventDefault(); 
      $.ajax({ 
       url: "foo.php", 
       success: function(rows) { 
        $.each(rows, function() { 
         var result = 'start of string'; // START 
         $.ajax({ 
          url: "bar", 
          async: false, // I DON'T want this 
          success: function(data) { 
           result += data; // MIDDLE 
          } 
         }); 
         result += 'end of string'; // END 
        }); 
       } 
      }); 
     }); 
    } 
} 

谢谢。

Answer 1

你可以利用jQuery的延期对象。你可以在不同的函数中使用两个不同的ajax调用，然后你可以使用.done（）方法来确保你在ajax调用完成后得到最终的字符串。

在这里阅读更多：

• http://api.jquery.com/category/deferred-object/
• http://api.jquery.com/deferred.done/

Answer 2

要做到这一点确实是通过延迟对象最简单的方法，使用jQuery when和done推迟你的JavaScript的例子报表;

$.when(ajaxCallOne()).done(ajaxCallTwo(rows)); 

function ajaxCallOne() { 
    return $.ajax({ 
       url : "foo.php", 
       async: true 
      }); 
} 

function ajaxCallTwo(rows) { 
    var result = 'start of string'; 
    $.each(rows, function() { 
     $.ajax({ 
      url : "bar", 
      async : true, 
      success : function(data) { 
       result += data; // MIDDLE 
      } 
     }); 
     result += 'end of string'; // END 
    }); 

    return result; 
} 

我不是JavaScript和jQuery专家，但我认为你应该看看那些延迟对象。

• http://api.jquery.com/category/deferred-object/
• http://api.jquery.com/jQuery.when/

Answer 3

我想你应该看看javascript promise design pattern

让我解释给你一点：

这个诺言是一种代理，代表 操作的未来结果。然后，您将在承诺上注册一个回调，一旦操作完成， 将由承诺执行， 结果可用。

使用jQuery你可以定义承诺如下：

var promise = $.getJSON('url'); 

然后使用自己的诺言变量，你可以定义你的要求完成或失败应该怎么做，甚至做的情况下，一些功能未能或succeded。

promise.done(function(s) {alert('done successfully'); }); 
promise.fail(function(){ alert('get failed!'); }); 
promise.always(function(){ alert('this 'll executed anyway!'); }); 

有很多教程上

Promises and Deferred objects in jQuery

jQuery: Deferred Object

javascript promises

What is the benefit of a 'promise' abstraction in CommonJS?

Answer 4

jQuery中ŧ他的方式来链接异步调用一个接一个地执行，正在使用promise.then()，在以前的jQuery版本中也被称为promise.pipe()。

Foo = { 
    foo: function() { 
     $(document).on("change", '.foo', function(e) { 
      e.preventDefault(); 

      var param1 = {url: "foo.php"}; 
      var param1 = {url: "bar"}; 

      $.ajax(param1) 
       .then(function(rows) { 
        var result = 'start of string'; //START 
        var fn = function(data) { 
         result += data; 
        } 
        var last, first; 
        $.each(rows, function() { // rows should be iterable 
         if (!last) { 
          first = last = $.ajax(param2).done(fn) 
         } else { 
          last = last.then(function(res) { 
           return $.ajax(param2).done(fn); 
          }); 
         } 
        }); 
        last.done(fn).done(function() { 
         result += 'end of string'; // END 
        }); 
        return first; 
       }); 
     }); 
    } 
}