Question

我必须与远程api交互，迫使我链接请求。这是异步模式下的回调 - 地狱：

// 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时声明函数“inline”，但这可能会让人感到有些困惑。

Answer 4

也许您可以做的是编写服务器端包装函数。这样你的javascript只对你自己的web服务器进行一次异步调用。然后您的Web服务器使用curl（或urllib等）与远程API进行交互。

Answer 5

更新：如果您使用的是jQuery，我已经为此学到了更好的答案，请参阅标题下的更新：使用jQuery Deffered

旧回答：

你也可以使用Array.reduceRight（当它可用时）打包$.ajax来电并将像[resource1, resource2]这样的列表转换为$.ajax({url:resource1,success: function(...) { $ajax({url: resource2...（这是我的一招）向Haskell学习，它是fold / foldRight函数。）

以下是一个例子：

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.when()函数来利用jQuery Deffered：

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

Answer 6

Check out this FAQ item on the jQuery site.特别是回调引用和完整方法。

你想要的是来自A的数据被传递给B和B的数据传递给C.所以你会在完成时进行回调。

我没试过这个。

Answer 7

我相信实现状态机会使代码更具可读性：

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 8

我使用Promises

创建了一个方法

// 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-承诺（只能解析 - 没有参数，只调用最后一个方法）

<强>背景：我为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. */
         }
});

如何链接ajax请求？

9 个答案:

如何？

和可链接队列方法