# @closeio/use-abortable-effect 中文文档

规范地址：https://npmcn.com/package/%40closeio/use-abortable-effect/

版本：1\.0\.0
npm 元数据更新时间：2026-10-20T16:08:11.733Z
中文译文更新时间：2026-11-10T02:13:43.069Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40closeio/use-abortable-effect
原文对照：https://npmcn.com/package/%40closeio/use-abortable-effect/?lang=original
项目主页：https://github.com/closeio/use-abortable-effect#readme
源码仓库：https://github.com/closeio/use-abortable-effect

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：26.3 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8
- 运行依赖：0 个
- peer 依赖：react \>=16\.8\.0，react-dom \>=16\.8\.0，prop-types ^15\.5\.4
- 首次发布：2020-06-18T13:45:20.271Z
- 最新版本发布：2020-06-18T13:45:20.523Z
- 近 30 天下载量：47460（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

运行可中止效果的超级简单反弹钩

## 安装

```sh
npm install @closeio/use-abortable-effect
```

也可以使用：`pnpm add @closeio/use-abortable-effect`、`yarn add @closeio/use-abortable-effect`、`bun add @closeio/use-abortable-effect`

## README

# (b) 使用-可减缓效应

[![NPM](https://img.shields.io/npm/v/@closeio/use-abortable-effect.svg)](https://www.npmjs.com/package/@closeio/use-abortable-effect) [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io/)

运行可中止效果的超级简单反应钩子 [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) API (英语).

[检查现场DEMO](https://closeio.github.io/use-abortable-effect/)。 。 。 .

### ![](https://npmcn.com/package/%40closeio/use-abortable-effect/close.svg)

有兴趣做这样的项目吗? [关闭](https://close.com/) 正在寻找 [伟大的工程师](https://jobs.close.com/) 加入我们的队伍!

## 安装

```bash
yarn add @closeio/use-abortable-effect
```

## 福利

-   极轻重量(小于500B minzipped).
-   它使用 [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) API 和它兼容 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) API (英语).
-   如果浏览器不支持 [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) API 然后钩子就跟普通的一样 [`useEffect`](https://reactjs.org/docs/hooks-effect.html) 钩. 见 [我能用吗](https://caniuse.com/#search=abortcontroller) 用于浏览器支持概览.
-   没有其他第三方依赖关系.

## API 差异关系 [`useEffect`](https://reactjs.org/docs/hooks-effect.html)

-   API 兼容 [`useEffect`](https://reactjs.org/docs/hooks-effect.html), (中文(简体) ), 其中,您通过输入时接受效果 [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) 和你一样 能够返回一个接受 [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) 举个例子.
-   支持可中止 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 请求.
-   支持运行可以轻易中止的自定义操作/计算.
-   自动损坏对重运行( 或组件卸载) 的影响, 除非您提供 自定义清理函数.

```jsx
useEffect(() => {
  // do something

  return () => {
    /* cleanup */
  };
}, [deps]);

const abortControllerRef = useAbortableEffect(
  (abortSignal) => {
    // do something

    return (abortController) => {
      /* do cleanup, you should probably abort */
    };
  },
  [deps],
);
```

## 使用量

### 可中止 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 请求

```jsx
import React from 'react';
import useAbortableEffect from '@closeio/use-abortable-effect';

export default function MyAbortableFetchComponent() {
  const abortControllerRef = useAbortableEffect((abortSignal) =>
    fetch(url, { signal: abortSignal })
      .then(/* … */)
      .catch((rejection) => {
        if (rejection.name !== 'AbortError') {
          // Re-throw or handle non-abort rejection in another way.
          return Promise.reject(rejection);
        }
      }),
  );

  const handleManualAbort = () => abortControllerRef.current.abort();

  // …
}
```

### 可中止的任意计算

```jsx
import React from 'react';
import useAbortableEffect from '@closeio/use-abortable-effect';

export default function MyAbortableComputationComponent() {
  const abortControllerRef = useAbortableEffect(abortSignal => {
    new Promise((resolve, reject) => {
      // Should be a DOMException per spec.
      const abortRejection = new DOMException(
        'Calculation aborted by the user',
        'AbortError',
      );

      // Handle when abort was requested before starting the computation.
      if (abortSignal.aborted) {
        return reject(abortRejection);
      }

      // This simulates an expensive computation.
      const timeout = setTimeout(() => resolve(1), 5000);

      // Listen for abort request.
      abortSignal.addEventListener('abort', () => {
        clearTimeout(timeout);
        reject(abortRejection);
      });
    })
      .then(/* … */)
      .catch(rejection => {
        if (rejection.name !== 'AbortError') {
          // Re-throw or handle non-abort rejection in another way.
          return Promise.reject(rejection);
        }
      }),
  });

  const handleManualAbort = () => abortControllerRef.current.abort();

  // …
}
```

### 自定义清理功能

```jsx
import React from 'react';
import useAbortableEffect from '@closeio/use-abortable-effect';

export default function MyCustomCleanupComponent() {
  const [gotAborted, setGotAborted] = useState(false);

  const abortControllerRef = useAbortableEffect((abortSignal) => {
    fetch(url, { signal: abortSignal })
      .then(/* … */)
      .catch((rejection) => {
        if (rejection.name !== 'AbortError') {
          // Re-throw or handle non-abort rejection in another way.
          return Promise.reject(rejection);
        }
      });

    // Just return a function like in `useEffect`, with the difference that you
    // get the abort controller (not a ref) as a param.
    return (controller) => {
      controller.abort();
      setGotAborted(true);
    };
  });

  const handleManualAbort = () => abortControllerRef.current.abort();

  // …
}
```

## 许可证

麻省理工学院 [关闭](https://github.com/closeio)

## 常见问题

### @closeio/use-abortable-effect 是什么？

运行可中止效果的超级简单反弹钩

### 如何安装 @closeio/use-abortable-effect？

在项目目录运行 npm install @closeio/use-abortable-effect，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.0）、react-dom（\>=16\.8\.0）、prop-types（^15\.5\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @closeio/use-abortable-effect 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/closeio\_\_use-abortable-effect 是否存在。

### @closeio/use-abortable-effect 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @closeio/use-abortable-effect 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @closeio/use-abortable-effect 可以商用吗？

@closeio/use-abortable-effect 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @closeio/use-abortable-effect 的下载量有多少？

根据 npm 官方下载统计，@closeio/use-abortable-effect 在 2026/10/10 – 2026/11/08 这 30 天内被下载 47,460 次，日均约 1,582 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @closeio/use-abortable-effect 还在维护吗？

最新版本 1\.0\.0 发布于 2020/06/18（6 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/06/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。