链Ajax和顺序执行。 jQuery的递延 [英] Chain ajax and execute it in sequence. Jquery Deferred

问题描述

我有3个过程，需要Ajax来完成。但它是异步的，它不能做我想做的事。

I have 3 processes that needs ajax to complete. But it is asynchronous and it fails to do what I wanted to do..

让我们说：

function a(param1, param2) {
     $.post(..., function(result){
         if(result){
            b();
         } else {
            console.log("failed a");
         }
     })
}

function b() {
      $.post(..., function(result){
         if(result){
            c();
         } else {
            console.log("failed b");
         }
     })
}

function c() {
     $.post(..., function(result){
         if(result){
            console.log("successful");
         } else {
            console.log("failed b");
         }
     })
}

我希望它像这样执行

I want it to execute like this

a
b
c

这code会很好地工作，因为你可以看到.. 但是，如果使用循环

That code will work perfectly, as you can see.. but if use a loop.

 var data = [{param1 : 1235, param2: 3214},  {param1 : 5432, param2: 9876}];

 $.each(data, function(k,v){
      a(v.param1, v.param2)
 });

它不会预想工作，只是做的：

It will not work as expected and will just do:

a
a
b
b
c
c

而不是

推荐答案

有很多方法来写这种东西。

There are many ways to write this kind of thing.

一个灵活的方法是由序单独行动，允许：

A flexible approach is separate "actions" from "sequence", allowing :

• 功能A，B，C发起一个异步（AJAX）动作，一个不知道它们是如何被测序
• 的a，b，c键是可重复使用的，如一个或多个序列的一部分，或个别地，按需要

下面是一种方法，code这种做法，使用。那么（）专供链接逻辑：

Here's a way to code this approach, using .then() exclusively for the chaining logic :

function a() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('a').promise();//convert success to failure.
    }, function() {
        return 'a';//continue on failure path.
    });
}
function b() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('b').promise();//convert success to failure.
    }, function() {
        return 'b';//continue on failure path.
    });
}
function c() {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject('c').promise();//convert success to failure.
    }, function() {
        return 'c';//continue on failure path.
    });
}

a().then(b).then(c).then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

另外，如果你想有一个异步函数， A ，从一个循环中调用那么code可能是这样的：

Alternatively, if you want to have a single asynchronous function, a, called from within a loop then the code could be something like this :

function a(obj) {
    return $.post(...).then(function(result) {
        if(result)
            return result;//continue on "success" path.
        else
            return $.Deferred().reject(obj.id).promise();//convert success to failure.
    }, function() {
        return obj.id;//continue on failure path.
    });
}

var data = [{id:'A', param1:1235, param2:3214},  {id:'B', param1:5432, param2:9876}];
//Note how IDs are included so these data objects can be identified later in failure cases.

var dfrd = $.Deferred();//starter Deferred for later resolution.
var p = dfrd.promise();//A promise derived from the starter Deferred, forming the basis of a .then() chain.

//Build a .then() chain by assignment
$.each(data, function(i, obj) {
    p = p.then( function() {
        return a(obj);
    });//By not including a fail handler here, failures will pass straight through to be handled by the terminal .then()'s fail handler.
});

//Chain a terminal .then(), with success and fail handlers.
p.then(function() {
    console.log("successful");
}, function(id) {
    console.log("failed: " + id);
});

dfrd.resolve();//Resolve the starter Deferred to get things started.

这篇关于链Ajax和顺序执行。 jQuery的递延的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！