cacheSignal

const signal = cacheSignal();

• 参考
  • cacheSignal
• 用法
  • 取消正在进行的请求
  • React 渲染完成后忽略错误

参考

¥Reference

cacheSignal

调用 cacheSignal 获取 AbortSignal。

¥Call cacheSignal to get an AbortSignal.

import {cacheSignal} from 'react';
async function Component() {
  await fetch(url, { signal: cacheSignal() });
}

当 React 完成渲染后，AbortSignal 将被中止。这允许你取消任何不再需要的正在进行的工作。以下情况视为渲染完成：

¥When React has finished rendering, the AbortSignal will be aborted. This allows you to cancel any in-flight work that is no longer needed. Rendering is considered finished when:

• React 已成功完成渲染

  ¥React has successfully completed rendering

• 渲染已中止

  ¥the render was aborted

• 渲染失败

  ¥the render has failed

参数

¥Parameters

此函数不接受任何参数。

¥This function does not accept any parameters.

返回

¥Returns

如果在渲染期间调用 cacheSignal，则会返回 AbortSignal。否则 cacheSignal() 将返回 null。

¥cacheSignal returns an AbortSignal if called during rendering. Otherwise cacheSignal() returns null.

注意事项

¥Caveats

• cacheSignal 目前仅用于 React 服务器组件。在客户端组件中，它始终会返回 null。将来，当客户端缓存刷新或失效时，它也会用于客户端组件。你不应该假设它在客户端上总是为空。

  ¥cacheSignal is currently for use in React Server Components only. In Client Components, it will always return null. In the future it will also be used for Client Component when a client cache refreshes or invalidates. You should not assume it’ll always be null on the client.

• 如果在渲染之外调用，cacheSignal 将返回 null，以明确当前范围不会永久缓存。

  ¥If called outside of rendering, cacheSignal will return null to make it clear that the current scope isn’t cached forever.

用法

¥Usage

取消正在进行的请求

¥Cancel in-flight requests

调用 cacheSignal 中止正在进行的请求。

¥Call cacheSignal to abort in-flight requests.

import {cache, cacheSignal} from 'react';
const dedupedFetch = cache(fetch);
async function Component() {
  await dedupedFetch(url, { signal: cacheSignal() });
}

import {cacheSignal} from 'react';
// 🚩 Pitfall: The request will not actually be aborted if the rendering of `Component` is finished.
const response = fetch(url, { signal: cacheSignal() });
async function Component() {
  await response;
}

React 渲染完成后忽略错误

¥Ignore errors after React has finished rendering

如果函数抛出异常，可能是由于取消（例如 数据库连接 已关闭）。你可以使用 aborted 属性 来检查错误是由于取消还是实际错误造成的。你可能希望 忽略由于取消而导致的错误。

¥If a function throws, it may be due to cancellation (e.g. the Database connection has been closed). You can use the aborted property to check if the error was due to cancellation or a real error. You may want to ignore errors that were due to cancellation.

import {cacheSignal} from "react";
import {queryDatabase, logError} from "./database";

async function getData(id) {
  try {
     return await queryDatabase(id);
  } catch (x) {
     if (!cacheSignal()?.aborted) {
        // only log if it's a real error and not due to cancellation
       logError(x);
     }
     return null;
  }
}

async function Component({id}) {
  const data = await getData(id);
  if (data === null) {
    return <div>No data available</div>;
  }
  return <div>{data.name}</div>;
}