在前端开发中，我们经常需要向后端发送请求获取数据。但是，如果用户在请求还未完成时离开了当前页面，这个请求就没有继续的必要了。为了避免这种无用的请求，我们需要在 Promise 中处理取消请求的问题。
Promise 中的取消请求
在 Promise 中，取消请求的实现方式有两种：通过 AbortController 和手动实现。
通过 AbortController 实现取消请求
AbortController 是一个新的 Web API，它可以用于取消 fetch 请求。下面是一个使用 AbortController 取消请求的示例代码：
-- -------------------- ---- ------- ----- ---------- - --- ------------------ ----- - ------ - - ----------- ---------- - ------ ---------------- -- - -- ------ -------------- -- - -- ---- --- -- ---- -------------------
在上面的代码中，我们首先创建了一个 AbortController 对象，然后从中获取 signal 属性，并将其传递给 fetch 函数。当我们需要取消请求时，只需要调用 controller.abort() 即可。
手动实现取消请求
在一些情况下，我们无法使用 AbortController 来取消请求。这时，我们可以手动实现取消请求。下面是一个手动实现取消请求的示例代码：
-- -------------------- ---- -------
-------- -------------------- -------- -
--- -------
----- ------- - --- ----------------- ------- -- -
----- --- - --- -----------------
----------------------- -- ------ -----
---------- - ---------- -
-- ----------- -- --- -- ---------- - ---- -
----------------------
- ---- -
-----------------------
-
--
----------- - ---------- -
-----------------------
--
----------- - ---------- -
----------------
--
-----------------------
------ - ---------- -
------------
--
---
------ - -------- ------ --
-
----- - -------- ------ - - -------------------- - ------- ------ ---
--------------------- -- -
-- ------
-------------- -- -
-- ------ --- -------- -
---------------------
- ---- -
---------------------
-
---
-- ----
---------在上面的代码中，我们首先定义了一个 fetchWithCancel 函数，它返回一个包含 promise 和 cancel 函数的对象。当我们需要取消请求时，只需要调用 cancel() 函数即可。
总结
通过使用 AbortController 或手动实现取消请求，我们可以有效地避免无用的请求。在实际开发中，我们应该根据具体情况选择适合自己的方式来处理取消请求的问题。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6587d968eb4cecbf2dd10ee6