如何优雅地取消 Promise 链
在前端开发中，Promise 链是非常常见的异步编程技巧。通过 Promise 链，我们可以逐一解决多个异步任务，并在必要时对结果进行处理。然而，在某些情况下，我们需要取消 Promise 链，特别是当用户行为发生变化、组件被卸载或系统发生错误等情况时。本文将介绍如何优雅地取消 Promise 链，使您的代码更健壮和可维护。
- 使用 AbortController
AbortController 是一个用于取消异步操作的 Web API，它可以取消fetch、XHR以及其他Promise 链的执行。它是一个非常优雅的解决方案，只需要在需要取消异步操作的地方实例化一个AbortController对象，并在Promise链中使用它的信号进行取消操作。例如：
const controller = new AbortController();
fetch('https://example.com/data', { signal: controller.signal })
.then(response => response.json())
.then(data => { /* 处理数据 */ });
// 取消
controller.abort();在上面的代码中，如果你想取消对https://example.com/data的请求，只需要调用controlle.abort()即可。同时，我们之前使用fetch()方法传入的AbortController.signal参数，也可以用来防止对已经取消的异步操作进行响应。
- 使用finally()
finally()方法可以保证即使在 Promise 链中止掉后，仍然会执行一些必要的操作。例如我们取消Promise链时，想要清楚下一步必须执行的代码，可以通过finally()方法来实现，例如：
-- -------------------- ---- -------
--- ----- - --
----- ------ - -------------- -- -
--------
------------------- -----------
-- ------ --- --- -
----------------------
-
-- ------
-----------------
-------- -- - -- ---- -- -- -- ----
------------ -- - -- ---- -- --
----------- -- ----------------------- -- -----在上面的代码中，当计时器计数器达到10时，我们通过clearInterval()方法停止计时器。当Promise链被取消时，Promise.finally()最后一个回调函数被调用。在这个例子中，它将清除间隔函数，以确保计时器在Promise链取消时被停止。
- 使用async/await语法
async/await是一种重要的异步编程技巧，如果使用得当，可以使Promise 链的代码更简单可读。在await关键字被调用时，它将暂停异步操作直到Promise被解决或将被拒绝。如果我们想要取消异步操作，可以使用try/catch方法并在catch块中添加取消操作。例如：
async function loadData() {
try {
const data = await fetch('https://example.com/data');
// 处理数据
} catch (error) {
// 取消异步操作
}
}在上面的代码中，如果发生错误或我们想要取消加载数据，try/catch块将捕获并处理错误或取消异步操作。
结论
在异步编程中，优雅地取消Promise链是非常重要的。使得我们的代码更健壮可维护，同时提供更好的用户体验。在本文中，我们介绍了AbortController、finally()和async/await等几种方法，供你优雅地取消Promise链。现在，您可以在您的应用程序中更加自信地使用Promise链了。
参考代码
以下是一些使用setTimeout()方法的例子，以演示如何在Promise链中使用AbortController、finally()和async/await方法。
- 基本示例
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ----- --------- - ------------- -- ------------------- ------ --------------------------------- - ------- ----------------- -- -------------- -- ---------------- ---------- -- - -- ---- -- -- ------------ -- - -- ---- -- -- ----------- -- -------------------------
在上面的例子中，如果在2秒之内没有完成请求，则AbortController将取消异步操作。无论Promise的结果如何，setTimeout()函数都将被清除。
- 使用try/catch语法
-- -------------------- ---- -------
----- -------- ---------- -
----- ---------- - --- ------------------
----- --------- - ------------- -- ------------------- ------
--- -
----- -------- - ----- --------------------------------- - ------- ----------------- ---
----- ---- - ----- ----------------
-- ----
- ----- ------- -
-- -------------
- ------- -
------------------------
-
-
-----------在上面的例子中，使用async/await语法使得代码更清晰。当发生错误或我们想要取消加载数据时，try/catch块将捕获并处理错误或取消异步操作。在最后部分，我们清除计时器，以确保它在Promise链取消时被停止。
- 使用withTimeout工具函数
-- -------------------- ---- -------
-------- -------------------- --- -
----- ---------- - --- ------------------
----- --------- - ------------- -- ------------------- ----
------ --- ----------------- ------- -- -
--------------------- --------
------------------------------------------- -- -- ---------- ---------------- ------------
------------- -- -------------------------
-
---------------------------------------------- -----
-------------- -- ----------------
---------- -- - -- ---- -- --
------------ -- - -- ---- -- ---在上面的例子中，我们使用了一个新的工具函数withTimeout()，它接受一个Promise对象和超时时间。它创建一个AbortController，并在超时时间之后取消异步操作。在Promise链后面，我们使用catch()方法来处理超时错误和其他错误，finally()方法负责删除计时器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3b271f40ec5a964e45c9d