cacheSignal()

RSC：cacheSignal 目前仅用于 React Server Components。

cacheSignal 允许你知道 cache() 的生命周期何时结束。

const signal = cacheSignal();

参考

cacheSignal

调用 cacheSignal 获取一个 AbortSignal。

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

当 React 完成渲染后，AbortSignal 会被中止。这样可以让你取消任何不再需要的进行中的工作。

渲染在以下情况下被视为完成：

• React 已成功完成渲染
• 渲染被中止
• 渲染失败

参数

此函数不接受任何参数。

返回值

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

注意事项

• cacheSignal 目前仅用于 React Server Components。在 Client Components 中，它总是返回 null。将来，当客户端缓存刷新或失效时，它也会用于 Client Components。你不应假设它在客户端上始终为 null。
• 如果在渲染之外调用，cacheSignal 会返回 null，以表明当前作用域不会被永久缓存。

用法

取消进行中的请求

调用 cacheSignal 来中止进行中的请求。

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

陷阱

你不能使用 cacheSignal 取消在渲染之外启动的异步工作，例如：

js 复制代码

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 完成渲染后忽略错误

如果某个函数抛出错误，可能是由于取消导致的（例如数据库连接已关闭）。你可以使用 aborted 属性来判断错误是由取消引起的，还是真正的错误。你可能希望忽略因取消而导致的错误。

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>;
}