Как связать три асинхронных вызова с помощью jQuery promises?

Ответ 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() feeds second() и second() feeds third().

DEMO (с $.when('foo'), чтобы выполнить выполненное обещание вместо $.ajax(...)).

Ответ 2

Фактически гораздо проще использовать promises с jQuery. Посмотрите на следующее:

$.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/

Ответ 3

Довольно поздно, чтобы ответить, но я предполагаю, что в ответах отсутствует какой-то простой код для создания цепочки. Цепочка событий довольно проста с поддержкой обещаний в jquery. Я использую следующее для создания цепочки:

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

Это просто без сложного для циклов или множественных вложенных обратных вызовов.

Ответ 4

Это намного проще.

$.ajax уже возвращает обещание (отложенный объект), поэтому вы можете просто написать

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

Ответ 5

Я нашел хорошее решение здесь: Как мне связать последовательность отложенных функций в jQuery 1.8.x?

И вот моя собственная реализация подобного подхода, несколько уродливая, но, вероятно, работающая. Он передает результат каждого метода как "обновление прогресса" возвращенного объекта обещания.

  $.chain = function() {
      var defer = $.Deferred();
      var funcs = arguments;
      var left = funcs.length;
      function next(lastResult) {
          if(left == 0) {
              defer.resolve();
              return;
          }
          var func = funcs[funcs.length - left]; // current func
          var prom = func(lastResult).promise(); // for promise will return itself,
                                       // for jquery ojbect will return promise.
          // these handlers will be launched in order we specify them
          prom.always(function() {
              left--;
          }).done(function(ret) {
              defer.notify({
                  idx: funcs.length-left,
                  left: left,
                  result: ret,
                  success: true,
              });
          }).fail(function(ret) {
              defer.notify({
                  idx: funcs.length-left,
                  left: left,
                  result: ret,
                  success: false,
              });
          }).always(function(ret) {
              next(ret);
          });
      }
      next();
      return defer.promise();
  };

Как использовать это для вашей ситуации? Может не красиво, но должно работать

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

var id;

funciton second() {
    return ajax(id, ...);
}

function third() {
    return ajax(id, ...);
}

$.chain(first, second, third).progress(function(p) {
    if(p.func == first)
        id = p.result.identifier;
}).then(function() {
    alert('everything is done');
});

Или вы можете просто присвоить эту переменную id из first функции.

Или, если вам нужен только предыдущий результат функции, вы можете использовать этот подход:

function first() {
    return ajax(...);
}
function second(first_ret) {
    return ajax(first_ret.id, ...);
}
function third(second_ret) {
    return ajax(second_ret.something, ...);
}

Ответ 6

Вы можете записать его более функционально:

[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)

Ответ 7

Приведенное ниже описание работает и позволяет динамически изменять список функций:

<html>
  <head>
  <title>demo chained synchronous calls</title>
  </head>
  <body>

  <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script type="text/javascript">
    function one(parms) {
        console.log('func one ' + parms);
        return 1;
    }

    function two(parms) {
        console.log('func two ' + parms);
        return 2;
    }

    function three(parms) {
        console.log('func three ' + parms);
        return 3;
    }

    function four(parms) {
        console.log('func four ' + parms);
        return 4;
    }

    var funcs = ['one', 'two', 'three', 'four'];
    var rvals = [0];

    function call_next_func() {
        if (funcs.length == 0) {
            console.log('done');
        } else {
            var funcname = funcs.shift();
            console.log(funcname);
            rvals.push(window[funcname](rvals));
            call_next_func();
        }
    }

    $(document).ready(function($){
        call_next_func();
    });
  </script>

  </body>
</html>

Ответ 8

Лучший способ сделать это - сделать для этого функцию повторного использования. Это можно сделать только с помощью одной строки кода, используя reduce:

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

Эта функция принимает массив обратных вызовов, которые возвращают объект обещания, например ваши три функции.

Использование примера:

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) });

И, конечно же, вы можете добавить столько функций в массив, сколько хотите.

Ответ 9

Чтобы связать вызовы jquery ajax, я сделал:

function A(){
     return $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
        code here
      }
    });
   }

   function B(){
     return $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
        code here
      }
    });
   }

   function C(){
     return $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
        code here
      }
    });
   }

   A().done(function(data){
     B().done(function(data){
        C();
     })
   });

Ответ 10

У меня была одна и та же проблема, связанная с вызовами ajax. После нескольких дней попыток я, наконец, сделал $.ajax({ async: false,... что полностью сделал то, что я хотел архивировать. Я просто не думал об этом. Это может помочь другим...