useCancelling()

构建一个在参数每次变化时取消 fetch 的 Endpoint

如果参数发生变化，会中止进行中的请求。

用法

resources/Todo

TodoDetail

Demo

import { useSuspense, useCancelling } from '@data-client/react';
import { TodoResource } from './resources/Todo';

export default function TodoDetail({ id }: { id: number }) {
  const todo = useSuspense(useCancelling(TodoResource.get, { id }), {
    id,
  });
  return <div>{todo.title}</div>;
}

结果

Store▶

试着快速点击 »。如果你在请求完成之前递增，请求将被取消，你在 store 中也不会看到结果。

警告

当许多互不相关的组件向 useSuspense() 获取相同参数（Endpoint/params 组合）时，请谨慎使用。该方案按组件中止 fetch，这意味着你可能会取消另一个组件仍然需要的 fetch。

类型

function useCancelling<
  E extends EndpointInterface & {
    extend: (o: { signal?: AbortSignal }) => any;
  },
>(endpoint: E, ...args: readonly [...Parameters<E>] | readonly [null]): E {