Question

我有一些async ajax requests

$.ajax({
    url: 'first.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

$.ajax({
    url: 'second.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

...

$.ajax({
    url: 'nth.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

每个请求完成后，我想运行console.log()。

我通常会编写以下代码：

$.ajax({
    url: 'first.php',
    async: true,
    success: function (data) {
        $.ajax({
            url: 'second.php',
            async: true,
            success: function (data) {
                //till the last ajax
            }
        });
    }
});

但是有人建议Promise.all([])。

如果我不得不运行4个ajax请求，哪种方法最好/最快？

Answer 1

使用Promise.all()。

var promises = [];

promises.push(new Promise(done=>{
  $.ajax({
      url: 'first.php',
      async: true,
      success: done
  });
}));

promises.push(new Promise(done=>{
  $.ajax({
      url: 'second.php',
      async: true,
      success: done
  });
}));

promises.push(new Promise(done=>{
  $.ajax({
      url: 'nth.php',
      async: true,
      success: done
  });
}));

Promise.all(promises).then(()=>{
  console.log("All ajax completed.");
});

Answer 2

官员jQuery documentation指出：

$。ajax（）从jQuery 1.5开始由$ .ajax（）返回的jqXHR对象实现Promise接口，为它们提供Promise的所有属性，方法和行为（有关更多信息，请参见Deferred对象）。

jQuery.when()：

提供了一种基于零个或多个thenable对象（通常是表示异步事件的Deferred对象）执行回调函数的方法。

因此您可以执行以下操作：

jQuery.when(
    $.ajax({
        url: 'first.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    }),

    $.ajax({
        url: 'second.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    }),

    ...,

    $.ajax({
        url: 'nth.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    })
).then(function() {console.log(...);});

如何等待多个ajax请求完成？

2 个答案: