前言
在 Web 开发中，我们常常需要发起异步请求，例如通过 Ajax 向后端请求数据。然而，这些请求的响应时间是不确定的，可能需要等待几秒钟，甚至几分钟。这就给用户体验带来了很大的问题，例如用户不知道等待多久才能看到数据。
要解决这个问题，我们可以通过设置超时时间来取消请求。这时候，npm 包 timeout-abort-controller 就可以派上用场了。接下来，本文将为您介绍这个包的使用方法。
安装
使用 timeout-abort-controller 前，您需要先检查自己的 Node 版本。该包要求 Node 版本 不低于 8.5.0，推荐使用最新版 Node。安装命令如下：
--- ------- ------------------------ ------
使用方法
初始化
在使用 timeout-abort-controller 之前，我们需要先初始化一个 AbortController 实例，代码如下：
----- - --------------- - - ------------------------------------ ----- ------- - ----- -- ---- - - ----- ---------- - --- ----------------- ------- ---
以上代码演示了如何创建一个超时时间为 1 秒的 AbortController 实例。该实例可以与 fetch 或其他支持 AbortSignal 的 API 一起使用。
计时器
为了在超时时间到达时自动取消请求，我们需要创建一个计时器，代码如下：
----- ----- - ------------- -- - ------------------- -- ---------
该代码演示了如何在超时时间到达时，调用 controller.abort() 方法来取消请求。
示例
为了更好地了解具体如何使用 timeout-abort-controller，我们来看一个传统的 Ajax 请求示例：
----- -------- ----------- - ----- -------- - ----- ------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
以上代码演示了如何使用 fetch 来获取数据。如果需要设置超时时间，我们可以使用以下代码：
----- -------- ---------------------- -
----- ------- - ----- -- ---- - -
----- ---------- - --- ----------------- ------- ---
----- ----- - ------------- -- -
-------------------
-- ---------
--- -
----- -------- - ----- ------------------------------------ - ------- ----------------- ---
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-- ----------- --- ------------- -
--------------------
- ---- -
------------------- -------
-
- ------- -
--------------------
-
-该代码演示了如何在超时时间到达时，自动取消请求，并输出相应的提示信息。同时，因为 AbortController 与 try...catch...finally 结构一起使用，所以我们还需要在 finally 中清除计时器，以免资源浪费。
总结
通过本文的介绍，我们了解了如何使用 timeout-abort-controller 包来设置超时时间，从而优化了用户体验，并且避免了客户端与服务器之间的不必要的资源浪费。当然，如果在实际应用中，您遇到了其他问题，还可以参考 timeout-abort-controller GitHub 仓库 中的文档，或者通过社区求助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaefcb5cbfe1ea0610f5e