abortableAtom

abortableAtom 用于定义具有中止性的派生原子。 它使用 AbortController 以便您可以中止异步函数。 在开始新计算（调用 read 函数）之前触发中止。

如何使用它：

const readOnlyDerivedAtom = abortableAtom(async (get, { signal }) => {
  // 使用信号中止你的函数
});

const writableDerivedAtom = abortableAtom(
  async (get, { signal }) => {
    // 使用信号中止你的函数
  },
  (get, set, arg) => {
    // ...
  }
);

signal 值为 AbortSignal。 您可以检查 signal.aborted 布尔值，或将 abort 事件与 addEventListener 一起使用。

对于 fetch 用例，我们可以简单地传递 signal。

有关 fetch 的用法，请参见下面的示例。

codesandbox

import { Suspense } from "react";
import { atom, useAtom } from "jotai";
import { abortableAtom } from "jotai/utils";

const userIdAtom = atom(1);
const userAtom = abortableAtom(async (get, { signal }) => {
  const userId = get(userIdAtom);
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}?_delay=2000`,
    { signal }
  );
  return response.json();
});

const Controls = () => {
  const [userId, setUserId] = useAtom(userIdAtom);
  return (
    <div>
      User Id: {userId}
      <button onClick={() => setUserId((c) => c - 1)}>Prev</button>
      <button onClick={() => setUserId((c) => c + 1)}>Next</button>
    </div>
  );
};

const UserName = () => {
  const [user] = useAtom(userAtom);
  return <div>User name: {user.name}</div>;
};

const App = () => (
  <>
    <Controls />
    <Suspense fallback="Loading...">
      <UserName />
    </Suspense>
  </>
);

export default App;