10. React 查询 - 中止请求

最新推荐文章于 2026-07-30 08:31:10 发布

原创最新推荐文章于 2026-07-30 08:31:10 发布 · 493 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React 查询（11 部分系列）

本文介绍了如何在React应用中使用ReactQuery中止HTTP请求。通过AbortSignal和AbortController，可以方便地管理和中止fetch或axios请求。ReactQuery本身支持信号处理，允许用户在需要时轻松终止查询。示例展示了如何在useQuery中使用信号来控制请求的中止。

嘿伙计，

今天是学习如何使用 ReactQuery 中止正在进行的请求的时候了。

在转到示例之前，我想介绍一下AbortSignal。

AbortSignal 是一个 javascript 接口，用于中止正在进行的方法。通常，您可以通过AbortController创建 AbortSignal ，这简化了 AbortSignal 的创建和执行。当你创建一个 AbortController ( controller = new AbortController()) 时，你会得到它的一个实例，它有两个核心概念：信号 ( controller.signal) 和中止方法 ( controller.abort())。

第一个很重要，因为它包含信号及其状态，第二个很重要，因为它允许您将中止的状态从更改false为true。

使用这两个接口，在 javascript 中，您可以立即处理使用fetch API创建的 HTTP 请求的中止，如果需要，也可以使用axios 。当您创建一个请求时，两者都接受一个信号，如果您中止该信号，您可以中止该请求。

AbortSignal 还有一个名为的静态方法timeout，它接受一个描述超时时间（以毫秒为单位）的数字。使用此方法，您可以轻松创建一个信号，该信号会在一段时间后更改其状态。如果您想处理请求超时，这很常见。

只是一个简单的例子，可以让您了解这些接口的强大功能。

try {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000);
  const res = await fetch(url, { signal: controller.signal });
  const body = await res.json();
} catch (e) {
  if (e.name === "AbortError") {
    // Notify the user of abort.
    // Note this will never be a timeout error!
  } else {
    // A network error, or some other problem.
    console.log(`Type: ${e.name}, Message: ${e.message}`);
  }
} finally {
  clearTimeout(timeoutId);
}

在此示例中，您可以看到使用 AbortController 创建的中止请求。此示例使用 setTimeout 方法来处理超时，您会注意到，当代码创建 fetch API 时，会将信号状态传递给 fetch。这样，fetch request 和 signal 就联系在一起了。可以使用 AbortSignal 超时方法以这种方式简化此示例。

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
  const body = await res.json();
} catch (e) {
  if (e.name === "AbortError") {
    // Notify the user of abort.
    // Note this will never be a timeout error!
  } else {
    // A network error, or some other problem.
    console.log(`Type: ${e.name}, Message: ${e.message}`);
  }
}

好的，现在您已经了解了 AbortSignal 和 AbortController 的工作原理，所以我们可以继续下一步；如何使用 ReactQuer 中止请求？

对你来说是个好消息，开箱即用的 ReactQuery 会为你处理每个查询和突变的信号，而你的业务只决定你是否要使用它。

让我们从一个例子开始

const fetchTodos = async (signal: AbortSignal | undefined): Promise<Todo[]> => {
  const response = await fetch('api/tasks', {
    signal,
  });
  if (!response.ok) {
    throw new ResponseError('Failed to fetch todos', response);
  }
  return await response.json();
};

interface UseTodos {
  todos: Todo[];
  isLoading: boolean;
  isFetching: boolean;
  error?: string;
  setUserFilter: Dispatch<SetStateAction<number | null>>;
}

export const useTodos = (): UseTodos => {
  const client = useQueryClient();

  const {
    data: todos = [],
    isLoading,
    isFetching,
    error,
  } = useQuery([QUERY_KEY.todos], ({ signal }) => fetchTodos(signal), {
    refetchOnWindowFocus: false,
    retry: 2
  });

  return {
    todos,
    isLoading,
    isFetching,
    error: mapError(error),
    setUserFilter,
  };
};