在前端开发中，尤其是在处理异步请求时，取消请求是一个非常重要的功能。它可以帮助我们优化用户体验、避免不必要的数据加载以及提高应用性能。Axios 提供了取消请求的能力，通过 CancelToken 或者 AbortController 来实现。
什么是取消请求？
取消请求是指在发起请求后，可以在请求完成之前取消该请求。这在一些场景下特别有用，比如用户快速切换页面或进行其他操作时，我们可能希望取消正在进行的请求，避免不必要的网络开销和资源浪费。
如何使用 CancelToken 取消请求
创建 CancelToken
首先，我们需要创建一个 CancelToken 实例。可以通过以下方式来创建：
-- -------------------- ---- -------
----- ----------- - ------------------
--- -------
------------------------ -
------------ --- -------------------- ----------- -
-- -- -------- -------- -------- - ------ -------- -- - ---------
------ - --
--
----------------- -------- -
-- ------------------------ -
-------------------- ---------- ----------------
- ---- -
-- ----
-
---在这个例子中，我们创建了一个 CancelToken 实例，并将取消函数赋值给变量 cancel。如果需要取消请求，只需调用 cancel() 函数即可。
取消请求
一旦我们有了取消函数，就可以在任何地方调用它来取消请求。例如，在用户点击某个按钮时：
document.getElementById('cancel-button').addEventListener('click', () => {
cancel('用户请求已取消');
});注意事项
CancelToken只能在请求发送前被创建。CancelToken一旦被使用后就不能再被重用。- 如果请求已经完成，那么取消请求不会产生任何效果。
使用 AbortController 取消请求
除了 CancelToken，Axios 还支持使用浏览器内置的 AbortController 来取消请求。这种方式更接近于原生的异步编程风格。
创建 AbortController
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------
------------------------ -
------- ------
-------------------------- -
-- ----
------------------------ -
-- ----------- --- ------------- -
---------------------
- ---- -
-- ------
-
---
-- ----
-------------------在这个例子中，我们创建了一个 AbortController 实例，并将其信号传递给 axios.get 方法。当需要取消请求时，调用 controller.abort() 即可。
特点
AbortController是一种基于 Promise 的取消机制，更加现代化。- 它可以用于任何基于 Promise 的异步操作，而不仅仅是 Axios 请求。
- 与
CancelToken相比，AbortController更符合现代 JavaScript 编程风格。
总结
取消请求是提升前端应用性能和用户体验的重要手段之一。通过使用 CancelToken 或 AbortController，我们可以有效地管理异步请求的生命周期。在实际开发中，应根据具体需求选择合适的方法来实现请求的取消功能。