cacheSignal

React Server Components

cacheSignal 目前仅与 React Server Components 一起使用。

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

const signal = cacheSignal();

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

参考

`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 Component，当客户端缓存刷新或失效时。你不应假设它在客户端上始终为 null。
如果在渲染之外调用，cacheSignal 将返回 null，以明确当前作用域并未被永久缓存。

用法

取消进行中的请求

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

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

Pitfall

你不能使用 cacheSignal 来中止在渲染之外开始的异步工作，例如：

import {cacheSignal} from 'react';
// 🚩 误区：如果 `Component` 的渲染已经完成，请求实际上不会被中止。
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) {
        // 仅在这是真实错误而非由取消引起时才记录
       logError(x);
     }
     return null;
  }
}

async function Component({id}) {
  const data = await getData(id);
  if (data === null) {
    return <div>没有可用数据</div>;
  }
  return <div>{data.name}</div>;
}

Previouscache

NextcaptureOwnerStack