如何使用 Promises 在 jQuery 中链接三个异步调用，将数据从一个调用传递到下一个调用？

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

在这个问题中，我们探讨了一个场景，其中您要在一个同步方式，并且您需要将数据从一个调用传递到下一个调用。

初始方法：

正如问题中提到的，您尝试将延迟用于前两个函数。这是一个好的开始，但它只涵盖了两个函数的情况。将其扩展到三个函数需要稍微不同的方法。

与 JqXHR 对象链接：

链接多个异步调用的关键是返回 $ 返回的 jqXHR 对象每个函数中的 .ajax() 。这些对象与 Promise 兼容，可以使用 .then()/.done()/.fail()/.always() 进行链接。

更新的代码：

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);
}

在此更新的代码中，first() 函数从其 AJAX 调用返回 jqXHR 对象，然后将该对象作为参数传递给 Second() 函数。第二个（）函数依次返回其 jqXHR 对象，该对象被传递给第三个（）函数。

在函数之间传递数据：

参数数据、textStatus 和 jqXHR 由上一个函数中的 $.ajax() 调用产生。这意味着first() 提供第二个()，第二个() 提供第三个()。因此，您可以使用这些参数将数据从一个函数传递到下一个函数。

演示：

下面的代码演示了使用 jQuery Promise 链接三个异步调用。它使用 $.when('foo') 代替 $.ajax(...).

function first() {
   return $.when('foo');
}

function second(data) {
   return $.when('bar' + data);
}

function third(data) {
   return $.when('baz' + data);
}

first().then(second).then(third)
  .done(function(data) {
     console.log(data); // Logs "bazbarfoo"
  });

来交付已履行的承诺。

以上是如何使用 Promises 在 jQuery 中链接三个异步调用，将数据从一个调用传递到下一个调用？的详细内容。更多信息请关注PHP中文网其他相关文章！