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;