如何使用jQuery promises链接三个异步调用？

Question

我需要以同步方式进行三次HTTP调用,如何将数据从一个调用传递到另一个调用？

function first()
{
   ajax()
}

function second()
{
   ajax()
}

function third()
{
   ajax()
}


function main()
{
    first().then(second).then(third)
}

我试图将延迟用于两个函数,我想出了一个部分解决方案.我可以将它扩展为三个功能吗？

function first() {
    var deferred = $.Deferred();
     $.ajax({

             "success": function (resp)
             {

                 deferred.resolve(resp);
             },

         });
    return deferred.promise();
}

function second(foo) {
     $.ajax({
            "success": function (resp)
            {
            },
            "error": function (resp)
            {
            }
        });
}


first().then(function(foo){second(foo)})

Answer 1

在每种情况下,返回由返回的jqXHR对象$.ajax().

这些对象是Promise兼容的,因此可以用.then()/ .done()/ .fail()/ 链接.always().

.then() 在这种情况下,你想要的就是问题中的那个.

function first() {
   return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
   return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
   return $.ajax(...);
}

function main() {
    first().then(second).then(third);
}

参数data,textStatus并且jqXHR来自$.ajax()前一个函数中的调用,即.first()饲料second()和second()饲料third().

DEMO(以$.when('foo')履行承诺,代替$.ajax(...)).

Answer 2

在使用jQuery的promises时,实际上有一种更简单的方法.看看以下内容:

$.when(
    $.ajax("/first/call"),
    $.ajax("/second/call"),
    $.ajax("/third/call")
    )
    .done(function(first_call, second_call, third_call){
        //do something
    })
    .fail(function(){
        //handle errors
    });

只需将所有调用链接到$ .when(...)调用并处理.done(...)调用中的返回值.

如果您愿意,可以参考以下内容:http: //collaboradev.com/2014/01/27/understanding-javascript-promises-in-jquery/

Answer 3

很晚回复,但我猜答案缺少一些直接的链接代码.链接事件非常简单,在jquery中有promise支持.我使用以下链接:

$.ajax()
.then(function(){
   return $.ajax() //second ajax call
})
.then(function(){
   return $.ajax() //third ajax call
})
.done(function(resp){
   //handle final response here
 })

它很简单,没有复杂的for循环或多个嵌套的回调.

Answer 4

它比那简单得多.

$.ajax 已经返回一个promise(Deferred对象),所以你可以简单地写

function first() {
    return $.ajax(...);
}

Answer 5

您可以通过更实用的方式编写它：

[function() { return ajax(...)}, function(data) { return ajax(...)}]
.reduce(function(chain, callback) { 
  if(chain) { 
    return chain.then(function(data) { return callback(data); });
  } else {
    return callback();
  }
}, null)

Answer 6

最好的方法是为此创建一个可重用的函数。这甚至可以使用一行代码来完成reduce：

function chainPromises(list) {
    return list.reduce((chain, func) => chain ? chain.then(func) : func(), null);
}

这个函数接受一个回调数组，它返回一个 promise 对象，就像你的三个函数一样。

用法示例：

chainPromises([first, second, third]).then(function (result) {
    console.log('All done! ', result);
});

这样， 的结果也first将自动成为 的参数second，所以基本上会发生这样的事情：

first().then(function(res1) { return second(res1) })
       .then(function(res2) { return third(res2)  })
       .then(function(result) { console.log('All done! ', result) });

当然，您可以根据需要向数组添加任意数量的函数。