如何使用 jQuery Promises 链接多个异步调用？

使用 jQuery Promises 链接三个异步调用

在异步编程中，连续多次调用 API 或服务器是很常见的。为了有效地处理这些调用，最好将它们链接在一起，确保每个调用在执行下一个调用之前完成。有了 jQuery Promise，这个链接过程就可以轻松完成。

考虑以下场景，其中需要依次进行三个 HTTP 调用，并且需要将数据从一个调用传递到另一个调用：

<code class="javascript">function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}</code>

在此示例中，目的是进行第一次调用，等待其完成，然后使用第一次调用的结果进行第二次调用，最后使用第一次调用的结果进行第三次调用第二次通话。但是，此代码不会按预期工作。要正确链接这些调用，需要正确使用 jQuery Promise。

<code class="javascript">function first() {
    var deferred = $.Deferred();
    $.ajax({
        "success": function(resp) {
            deferred.resolve(resp);
        },
    });
    return deferred.promise();
}

function second(foo) {
    $.ajax({
        "success": function(resp) {
            // do something with the resp
        },
        "error": function(resp) {
            // handle the error
        },
    });
}

first().then(function(foo) {
    second(foo);
});</code>

此代码提供了部分解决方案，但仍然没有实现三个函数的链接。链接多个调用的关键在于返回每个函数中 $.ajax() 返回的 jqXHR 对象。这些对象是 Promise 兼容的，并且可以使用 .then()/.done()/.fail()/.always() 进行链接。

<code class="javascript">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);
}</code>

在此修订后的代码中，由返回的 jqXHR 对象每个 $.ajax() 调用代表相应函数的 Promise。这允许函数按顺序链接，一个函数的输出作为输入传递给下一个函数。

参数 data、textStatus 和 jqXHR 来自前一个函数中的 $.ajax() 调用。例如，first() 提供 secondary()，second() 提供third()，传递任何相关数据。

要查看此链接的实际效果，请使用 $.when('foo' 进行现场演示）以兑现承诺，如下所示。

以上是如何使用 jQuery Promises 链接多个异步调用？的详细内容。更多信息请关注PHP中文网其他相关文章！