我程序中的几乎所有函数都有某种异步调用，但它们都依赖于某些先前函数的结果。因此，我将下一个函数调用硬编码到每个单独的函数调用中:

function getStuff() {
    $.ajax({
        ...
        success: function(results) {
            // other functions involving results
            getMoreStuff(results);
        }
    });
}

function getMoreStuff(results) {
    $.ajax({
        ...
        success: function(moreResults) {
            // other functions involving moreResults
            doSomethingWithStuff(moreResults);
        }
    );
}

等等。这是一个大链，每个函数调用下一个。虽然这在程序中有效，但它会使每个函数单独无用。

我对如何避免这个问题有点迷茫。我不知道如何使用一般的回调函数，因为当我进行函数调用时，它最终是这样的(使用上面的函数):

getStuff(function() {
    getMoreStuff(results, doSomethingWithStuff);
};

但是“结果”还没有定义。

解决方案似乎很明显，我只是对它有点偏执。对不起!

最佳答案

概览

您有几个选择。您可以使用这些函数让您的代码看起来像这样，使用回调:

getStuff(function(results) {
    getMoreStuff(results, doSomethingWithStuff);
});

或者像这样，使用 jQuery 的 Deferred 和 Promise 对象:

getStuff().then(getMoreStuff).then(doSomethingWithStuff):

使用回调

让 getStuff 和 getMoreStuff 接受一个参数，该参数是完成时调用的回调，例如:

function getStuff(callback) {
//                ^------------------------------ callback argument
    $.ajax({
        ...
        success: function(results) {
            // other functions involving results
            callback(results);
//          ^------------------------------------ use the callback arg
        }
    });
}

...对于 getMoreStuff 也是如此。

使用Deferred 和Promise

jQuery 的 ajax 函数集成了它的 Deferred 和 Promise 功能。您只需将 return 添加到现有函数中即可使其正常工作，例如:

function getStuff(callback) {
    return $.ajax({
        ...
    });
}

(注意:不需要 success 回调。)

然后这段代码:

getStuff().then(getMoreStuff).then(doSomethingWithStuff);

这样做:

1. getStuff 开始其 ajax 调用并返回调用创建的 Promise。

2. 当 ajax 调用完成并解决 promise 时，将调用 getMoreStuff 并将 ajax 调用的结果作为其第一个调用争论。它开始它的 ajax 调用。

3. 当 getMoreStuff 的 ajax 调用完成时，doSomethingWithStuff 被调用，that 的结果调用(getMoreStuff 中的那个)。

重要的是使用then，而不是done，以便在每个阶段传递正确的结果。 (如果您使用 done，getMoreStuff 和 doSomethingWithStuff 都会看到 getStuff 的 ajax 调用。)

这是一个使用 ajax 的完整示例:

Fiddle | Alternate Fiddle with the ajax calls taking one second each (更容易看到发生了什么)

function getStuff() {
    display("getStuff starting ajax")
    return $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: {json: '{"message": "data from first request"}'},
        dataType: "json"
    });
}

function getMoreStuff(results) {
    display("getMoreStuff got " + results.message + ", starting ajax");
    return $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: {json: '{"message": "data from second request"}'},
        dataType: "json"
    });
}

function doSomethingWithStuff(results) {
    display("doSomethingWithStuff got " + results.message);
}

getStuff().then(getMoreStuff).then(doSomethingWithStuff);

function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
}

输出:

getStuff starting ajax

getMoreStuff got data from first request, starting ajax

doSomethingWithStuff got data from second request

You don't need to be using ajax to get the benefit of this, you can use your own Deferred and Promise objects, which lets you write chains like this:

one().then(two).then(three);

...适用于您可能具有异步完成的任何情况。

这是一个非 ajax 示例:

Fiddle

function one() {
    var d = new $.Deferred();
    display("one running");
    setTimeout(function() {
      display("one resolving");
      d.resolve("one");
    }, 1000);
    return d.promise();
}

function two(arg) {
    var d = new $.Deferred();
    display("Two: Got '" + arg + "'");
    setTimeout(function() {
      display("two resolving");
      d.resolve("two");
    }, 500);
    return d.promise();
}

function three(arg) {
    var d = new $.Deferred();
    display("Three: Got '" + arg + "'");
    setTimeout(function() {
      display("three resolving");
      d.resolve("three");
    }, 500);
    return d.promise();
}

one().then(two).then(three);

function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
}

输出:

one running

one resolving

Two: Got 'one'

two resolving

Three: Got 'two'

three resolving

These two (the ajax example and the non-ajax example) can be combined when necessary. For instance, if we take getStuff from the ajax example and we decide we have to do some processing on the data before we hand it off to getMoreStuff, we'd change it like this: Fiddle

function getStuff() {
    // Create our own Deferred
    var d = new $.Deferred();
    display("getStuff starting ajax")
    $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: {json: '{"message": "data from first request"}', delay: 1},
        dataType: "json",
        success: function(data) {
            // Modify the data
            data.message = "MODIFIED " + data.message;

            // Resolve with the modified data
            d.resolve(data);
        }
    });
    return d;
}

请注意，我们使用它的方式没有改变:

getStuff().then(getMoreStuff).then(doSomethingWithStuff);

所有更改都在 getStuff 中。

这是关于整个“promise”概念的伟大之处之一(它根本不是特定于 jQuery，但 jQuery 为我们提供了方便的版本以供使用)，它非常适合解耦事物。

关于javascript - 如何避免 Javascript/jQuery 中的硬编码、链式异步函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18144316/