Как связать AJAX-запросы?

Question

Мне нужно взаимодействовать с удаленным API, который вынуждает меня связывать запросы. Thats callback-ад в асинхронном режиме:

// pseudocode: ajax(request_object, callback)
ajax(a, function() {
  ajax(b(a.somedata), function() {
    ajax(c(b.somedata), function() {
      c.finish()
    }
  }) 
})

Это было бы намного более читабельно в режиме синхронизации:

sjax(a)
sjax(b(a.somedata))
sjax(c(b.somedata))
c.finish()

Но Sjax - это зло :) Как мне сделать это хорошим не таким злым и читабельным способом?

Answer 1

У вас может быть одна функция, которой передается целое число, чтобы указать, на каком этапе находится запрос, а затем использовать оператор switch, чтобы выяснить, какой запрос нужно сделать следующим:

function ajaxQueue(step) {
  switch(step) {
    case 0: $.ajax({
              type: "GET",
              url: "/some/service",
              complete: function() { ajaxQueue(1); } 
    }); break;
    case 1: $.ajax({
              type: "GET",
              url: "/some/service",
              complete: function() { ajaxQueue(2); }
            }); break;
    case 2: $.ajax({
              type: "GET",
              url: "/some/service",
              complete: function() { alert('Done!'); }
            }); break;
  }
}

ajaxQueue(0);

Надеюсь, это поможет!

Answer 2

Не используйте анонимные функции. Дайте им имена. Я не знаю, сможете ли вы сделать то, что я написал ниже:

var step_3 = function() {
    c.finish();
};

var step_2 = function(c, b) {
    ajax(c(b.somedata), step_3);
};

var step_1 = function(b, a) {
  ajax(b(a.somedata), step_2);
};

ajax(a, step_1);

Answer 3

Эта функция должна объединять список ajax-запросов, если обратные вызовы всегда возвращают параметры, необходимые для следующего запроса:

function chainajax(params, callbacks) {
  var cb = shift(callbacks);
  params.complete = function() {
    var newparams = cb(arguments);
    if (callbacks)
      chainajax(newparams, callbacks);
  };
  $.ajax(params);
};

Вы можете определить эти функции обратного вызова отдельно, а затем объединить их в цепочку:

function a(data) {
  ...
  return {type: "GET", url: "/step2.php?foo"}
};
// ...
function d(data) { alert("done!"); };

chainajax({type: "GET", url: "/step1.php"},
  [a, b, c, d]);

Вы также можете объявить функции "встроенными" при вызове chainajax, но это может немного запутать.

Answer 4

Может быть, вы можете написать функцию-оболочку на стороне сервера. Таким образом, ваш javascript выполняет только один асинхронный вызов вашего собственного веб-сервера. Затем ваш веб-сервер использует curl (или urllib и т. Д.) Для взаимодействия с удаленным API.

Answer 5

Обновление: я получу лучший ответ на этот вопрос, если вы используете jQuery, см. Мое обновление под заголовком: Использование jQuery Deffered

Старый ответ:

Вы также можете использовать Array.reduceRight (когда это возможно), чтобы обернуть вызовы $.ajax и преобразовать список, например: [resource1, resource2] в $.ajax({url:resource1,success: function(...) { $ajax({url: resource2... (трюк, который я узнал из Haskell и его сложение / сложение справа функция).

Вот пример:

var withResources = function(resources, callback) {
    var responses = [];
    var chainedAjaxCalls = resources.reduceRight(function(previousValue, currentValue, index, array) {
        return function() {
            $.ajax({url: currentValue, success: function(data) {
                responses.push(data);
                previousValue();
            }})
        }
    }, function() { callback.apply(null, responses); });
    chainedAjaxCalls();
};

Тогда вы можете использовать:

withResources(['/api/resource1', '/api/resource2'], function(response1, response2) {
    // called only if the ajax call is successful with resource1 and resource2
});

Использование jQuery Deffered

Если вы используете jQuery, вы можете воспользоваться jQuery Deffered , используя функцию jQuery.when():

 jQuery.when($.get('/api/one'), $.get('/api/two'))
       .done(function(result1, result2) { 
              /* one and two is done */
        });

Answer 6

Я считаю, что реализация конечного автомата сделает код более читабельным:

var state = -1;
var error = false;

$.ajax({success: function() { 
                  state = 0;
                  stateMachine(); },
        error: function() {
                  error = true;
                  stateMachine();
        }});

function stateMachine() {
  if (error) {
     // Error handling
     return;
  }

  if (state == 0) {
    state = 1;
    // Call stateMachine again in an ajax callback
  }
  else if (state == 1) {

  }
}

Answer 7

Ознакомьтесь с этим разделом часто задаваемых вопросов на сайте jQuery. Специально ссылка на обратный вызов и полный метод.

То, что вы хотите, это чтобы данные из А передавались в В, а данные В передавались в С. Таким образом, вы сделали бы обратный вызов по завершении.

Я еще не пробовал это.

Answer 8

Я сделал метод, используя Обещания

// How to setup a chainable queue method
var sequence = Promise.resolve();

function chain(next){
    var promise = new Promise(function(resolve){
        sequence.then(function(){
            next(resolve);
        });	
    });

    sequence = promise;
}

// How to use it
chain(function(next){
    document.write("<p>start getting config.json</p>");
    setTimeout(function(){
    	document.write("<p>Done fetching config.json</p>");
        next();
    }, 3000);
});

chain(function(next){
    document.write("<p>start getting init.js</p>")
    setTimeout(function(){
        document.write("<p>starting eval scripting</p>");
        next();
    }, 3000);
});

chain(function(next){
    document.write("<p>Everything is done</p>");
});

---

Бонус : Сверхлегкий 138-байтовый ограниченный A-Promise (который может разрешать только без параметров и вызывать только последний метод then)

Фон : Я сделал это для node.js в том месте, где он не имеет обещаний ATM. Я не хотел иметь полноценную библиотеку Promise, от которой зависел и должен был включить ее в package.json, мне нужно, чтобы она была быстрой и легкой и делала в основном только одну вещь. Мне это нужно было только для одной цели (цепочка вещей, которые вы хотите)

function Q(a,b){b=this;a(function(){b.then&&b.then();b.then=i});return b}function i(a){a&&a()}Q.prototype={then:function(a){this.then=a}};

Как?

// Start with a resolved object
var promise = new Q(function(a){a()});
// equal to 
// var promise = Promise.resolve();

// example usage
new Q(function(resolve){
    // do some async stuff that takes time
    // setTimeout(resolve, 3000);
}).then(function(){
    // its done
    // can not return a new Promise
}); // <- can not add more then's (it only register the last one)

и для метода цепочечной очереди

// How to setup a chainable queue method with ultraligth promise
var sequence = new Q(function(a){a()});

function chain(next){
    var promise = new Q(function(resolve){
        sequence.then(function(){
            next(resolve);
        }); 
    });

    sequence = promise;
}

Answer 9

Полный обратный вызов - это то, что вы ищете:

$.ajax({
     type: 'post',
     url: "www.example.com",
     data: {/* Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. */},
     success:
          function(data) {
              /* you can also chain requests here. will be fired if initial request is successful but will be fired before completion. */
          },
    complete: 
         function() {
             /* For more a more synchronous approach use this callback. Will be fired when first function is completed. */
         }
});