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