在前端开发中，我们常常需要向服务器发送请求获取数据。使用 fetch() API 是一种常见的方式。然而，当我们发送了一个请求后，有时候我们需要取消它。这篇文章将介绍如何取消一个 HTTP fetch() 请求，并提供示例代码。
为什么需要取消请求？
在一些情况下，我们可能需要取消正在进行的请求。例如：
- 用户已经离开了当前页面，但请求还在进行，这可能会导致资源浪费。
- 用户对正在进行的请求感到不耐烦，想要取消它并执行其他操作。
- 请求所获取的数据已经不再需要，因此希望取消请求来释放资源。
如何取消请求？
要取消一个 HTTP 请求，我们需要使用 AbortController API。它是一个可以用于取消网络请求的 API。具体步骤如下：
- 创建一个新的 AbortController 对象。
const controller = new AbortController();
- 将 AbortController.signal 属性作为 fetch() 方法的 signal 参数传入。
const response = await fetch(url, { signal: controller.signal });- 调用 controller.abort() 方法以取消请求。
controller.abort();
注意：在调用 AbortController.abort() 方法后，fetch() 返回的 Promise 将会被 reject，并且会抛出 AbortError 错误。
示例代码
以下是一个简单的示例代码，演示如何使用 AbortController 取消一个正在进行的 fetch() 请求。
-- -------------------- ---- -------
----- ---------- - --- ------------------
----- ------ - ------------------
--------------------------------- - ------ --
-------------- -- ----------------
---------- -- ------------------
------------ -- -
-- ----------- --- ------------- -
-------------------- ----------
- ---- -
---------------------- -------- -------
-
---
-- ---------
------------------------------------------------------------------ -- -- -
-------------------
---在上面的代码中，我们创建了一个 AbortController 对象，并将其 signal 属性传递给 fetch() 方法。当用户点击按钮时，我们调用 controller.abort() 方法以取消正在进行的请求。如果请求被取消，我们会在控制台输出 "Request aborted"。
总结
使用 AbortController API 可以方便地取消一个 HTTP fetch() 请求。虽然这不是一个常见的操作，但在某些情况下可以提高用户体验并减少服务器资源浪费。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13345