# @bjornagh/use-fetch 中文文档

规范地址：https://npmcn.com/package/%40bjornagh/use-fetch/

版本：0\.0\.12
npm 元数据更新时间：2022-04-04T19:18:33.568Z
中文译文更新时间：2026-11-08T05:24:26.630Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：31 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：react \>= 16\.8\.0
- 首次发布：2019-02-09T18:49:41.655Z
- 最新版本发布：2019-09-28T06:31:08.844Z
- 近 30 天下载量：5603（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）

## 中文简介

用于获取请求的易用回放钩

## 安装

```sh
npm install @bjornagh/use-fetch
```

也可以使用：`pnpm add @bjornagh/use-fetch`、`yarn add @bjornagh/use-fetch`、`bun add @bjornagh/use-fetch`

## README

# @bjornagh/ use- fatch (英语)

方便使用的回放钩 `fetch` 请求.

## 特征

-   1️⃣ Dedupes请求完成到同一端点. 对同一终点只提出一项请求.
-   QQ 响应以提高速度并减少请求量 .
-   如果 URL 更改, 则自动提出新请求 .
-   \* 规模小,只有两个依赖: `react` 财务报告和审定财务报表 `fetch-dedupe`。 。 。 .

## 安装

```bash
npm install @bjornagh/use-fetch

# if yarn
yarn add @bjornagh/use-fetch
```

## 使用量

1.  创建缓存( 新地图( ))并渲染 `FetchProvider` 在您的应用程序的顶端.

```jsx
import { FetchProvider } from "@bjornagh/use-fetch";

const cache = new Map();

ReactDOM.render(
  <FetchProvider cache={cache}>
    <App />
  </FetchProvider>,
  document.getElementById("container")
);
```

2.  使用 `useFetch` 在组件中

```jsx
import React from "react";
import { useFetch } from "@bjornagh/use-fetch";

function MyComponent() {
  const { data, fetching } = useFetch({
    url: "https://jsonplaceholder.typicode.com/todos"
  });

  return (
    <div>
      {fetching && "Loading..."}
      {data && data.map(x => <div key={x.id}>{x.title}</div>)}
    </div>
  );
}
```

更多例子见示例部分 [示例一节](https://github.com/bghveding/use-fetch#Examples) 。 。 。 .

## API 密码

`useFetch` 接受支持以下属性的对象

| 密钥 | 默认值 | 说明 |
| --- | --- | --- |
| url 密码 |  | 要发送请求的 URL |
| 方法 | 获取 | HTTP 方法 |
| 懒惰 | 无效 | 懒惰模式决定一个请求是否应在挂载上完成,以及请求参数何时变化(如URL)或不变化. 当挂载时只启动 GET 请求时, 例如如果 URL 更改 。 若为 `true` 这适用于所有请求,不论HTTP方法如何。 若为 `false`,请求只通过手动启动 `doFetch`,返回函数 `useFetch` |
| 输入 | {} | 见 [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorker GlobalScope/fetch (中文(简体) )](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) `init` 支持键的参数 |
| 脱发选项 | {} | 见 [https://github.com/jamesplease/fetch-dedupe#user-content-api 页面存档备份,存于互联网档案馆](https://github.com/jamesplease/fetch-dedupe#user-content-api) `dedupeOptions` 支持键的参数 |
| 缓存响应 | 已读请求为真, 已写为假 | 缓存响应与否 |
| 请求键 | 无效 | requestKey被用作缓存密钥并预防重复请求. 如果无一被传递,则自动生成. |
| 缓存政策 | 无效 | [藏匿战略](https://github.com/bghveding/use-fetch#cachepolicy) |
| 刷新“ Dotch” | 函数 | 默认 doFetch 方法为纪念( 通过 `useCallback`),使用请求(url+方法+body). 如果您得到一个 stale doFatch , 请使用它来覆盖 。 它收到一个参数,即默认请求密钥. 譬如说. `requestKey => requestKey + 'something'` |
| 错误 | 函数 | 获取失败时称为回调函数 。 接收 a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) 成为唯一的争论。 默认要控制台的日志 |
| 成功时 | 函数 | 一个调用函数,在每次获取成功时都称为调用函数 。 接收获取 [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) 成为唯一的争论。 默认不做( 无) |

返回值

| 密钥 | 类型 | 说明 |
| --- | --- | --- |
| 回应 | [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) | [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) |
| 数据 | \* 联合国 | 请求数据回复 |
| 获取 | 布尔 | 请求是否在飞行中 |
| 错误 | [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) | 任何错误来自 `fetch` |
| 请求键 | 字符串 | 用作缓存密钥并用于防止重复请求 |
| ưμ㼯A | 函数 | 手动启动请求的函数 。 还有一个论点: `init`,发送对象 `fetch`。见 [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorker GlobalScope/fetch (中文(简体) )](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) (单位:千美元)`init` 参数。 返回一个承诺. |

注:请求 `Content-type` 设置为 `application/json` 将自动拥有他们的身体 已字符串( e)`JSON.stringify`(中文(简体) )

### `cachePolicy`

-   `cache-first` - 如果可用,在缓存中使用响应。 如果不是,则会提出请求.
-   `cache-and-network` - 在可得到的缓存中使用响应,但也总是在背景中提出新的请求,以刷新任何陈旧的数据.
-   `exact-cache-and-network` - 类似 `cache-and-network`,但只有在请求相同时才会显示缓存响应(url+方法+body).
-   `network-only` - 忽略缓存,总是提出请求.

读取默认请求( GET、 选项、 头) `cache-first`。 。 。 .

写入请求( POST, DELETE, PUT, PATCH) 默认为 `network-only`。 。 。 .

## 实例

### POST 请求及随后更新视图

```jsx
function Demo() {
  // Fetch list of posts
  const posts = useFetch({
    url: "https://jsonplaceholder.typicode.com/posts"
  });

  // Prepare create request
  // This will not be initiated until you call `createPost.doFetch()`
  const createPost = useFetch({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    init: {
      headers: {
        "Content-type": "application/json"
      }
    }
  });

  return (
    <div>
      <button
        onClick={() =>
          createPost
            .doFetch({
              body: {
                title: "foo",
                body: "bar",
                userId: 1
              }
            })
            .then(response => {
              if (response.ok) {
                // POST request was successful, refetch list of posts
                posts.doFetch();
              } else {
                // Do something with error response
              }
            })
        }
        disabled={createPost.fetching}
      >
        Create post
      </button>

      {!posts.data && posts.fetching && "Loading..."}
      {posts.data && posts.data.map(x => <h2 key={x.id}>{x.title}</h2>)}
    </div>
  );
}
```

### 延迟使用 `lazy` 道具

设置 `lazy` 参数改为 `true` 告诉 `useFetch` 不在挂载时或何时开始请求 请求参数改变.

你可以随时改变这个 此功能有用的一个常见模式是您需要时 用户在启动请求前应用一些过滤器.

以下是一个请求被延迟到搜索输入至少包含两个字符的例子.

```jsx
function LazyDemo() {
  const [searchFilter, setSearchFilter] = useState("");
  const posts = useFetch({
    url: `/posts?search=${searchFilter}`,
    lazy: searchFilter.length < 2 // Request is lazy as long as the input has less than two characters
  });

  return (
    <div>
      <input onChange={event => setSearchFilter(event.target.value)} />

      {posts.data && posts.data.map(x => <div key={x.id}>{x.title}</div>)}
    </div>
  );
}
```

### 如何设置基准 URL、默认信头等

创建自定义取钩 。 例如:

```jsx
import { useFetch } from "@bjornagh/use-fetch";

function useCustomUseFetch({ url, init = {}, ...rest }) {
  // Prefix URL with API root
  const apiRoot = "https://my-api-url.com/";
  const finalUrl = `${apiRoot}${url}`;

  // Set a default header
  const finalHeaders = { ...init.headers };
  finalHeaders["Content-type"] = "application/json";

  // Ensure headers are sent to fetch
  init.headers = finalHeaders;

  return useFetch({ url: finalUrl, init, ...rest });
}
```

使用自定义的钩子, 您也可以设置一个默认错误处理器, 例如显示一个祝词 .

## 贷项

这个图书馆深受优秀的React图书馆的启发 [响应请求](https://github.com/jamesplease/react-request)

## 常见问题

### @bjornagh/use-fetch 是什么？

用于获取请求的易用回放钩

### 如何安装 @bjornagh/use-fetch？

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

### @bjornagh/use-fetch 支持 TypeScript 吗？

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

### @bjornagh/use-fetch 支持 ESM 还是 CommonJS？

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

### @bjornagh/use-fetch 可以商用吗？

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

### @bjornagh/use-fetch 的下载量有多少？

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

### @bjornagh/use-fetch 还在维护吗？

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