React中如何用react query和fetch取消重复触发的POST请求

核心原理 #

React Query 内置请求取消机制，只要你的请求函数接收并使用框架传递的 signal 参数，就能在新请求触发（或组件卸载）时自动取消旧的 pending 请求。之前 AbortController 未生效，大概率是没和 React Query 的内置取消逻辑关联。

场景1：用 useQuery 处理带参数的 POST 查询 #

如果你的 POST 请求用于获取数据（比如按筛选条件查询），可通过更新 queryKey 触发新请求，同时自动取消旧请求：

import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';

// 请求函数：必须接收 React Query 传递的 signal 参数
const fetchByPost = async ({ queryKey, signal }) => {
  const [_, requestData] = queryKey;
  const res = await fetch('/api/your-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(requestData),
    signal, // 关键：将 React Query 的 signal 传给 fetch
  });

  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

export function QueryComponent() {
  const [requestData, setRequestData] = useState({ keyword: '' });

  const { data, isLoading } = useQuery({
    queryKey: ['post-query', requestData], // queryKey 包含请求参数，参数变化触发新请求
    queryFn: fetchByPost,
    staleTime: 0,
  });

  const handleClick = () => {
    // 更新参数触发新请求，旧请求自动被取消
    setRequestData({ keyword: new Date().toString() });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isLoading}>
        {isLoading ? '请求中...' : '发起POST查询'}
      </button>
      {data && <div>结果：{JSON.stringify(data)}</div>}
    </div>
  );
}

场景2：用 useMutation 处理提交类 POST 请求 #

如果是提交型 POST（比如表单提交），需显式开启 cancelPrevious 配置，让新 mutation 触发时取消旧的 pending 请求：

import { useMutation } from '@tanstack/react-query';
import { useState } from 'react';

// 请求函数：接收 signal 参数关联取消逻辑
const submitData = async ({ payload, signal }) => {
  const res = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
    signal, // 关联 React Query 的取消信号
  });

  if (!res.ok) throw new Error('提交失败');
  return res.json();
};

export function MutationComponent() {
  const [inputValue, setInputValue] = useState('');

  const mutation = useMutation({
    mutationFn: submitData,
    cancelPrevious: true, // 关键：开启取消前一个 pending 的 mutation
    onSuccess: (data) => {
      console.log('提交成功', data);
    },
    onError: (err) => {
      // 忽略 AbortError（取消旧请求属于预期行为）
      if (err.name !== 'AbortError') {
        console.error('提交失败', err);
      }
    },
  });

  const handleSubmit = () => {
    mutation.mutate({ payload: { value: inputValue } });
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleSubmit} disabled={mutation.isPending}>
        {mutation.isPending ? '提交中...' : '提交'}
      </button>
    </div>
  );
}

常见问题排查 #

1. 未传递 signal 参数：手动创建独立的 AbortController 无法联动 React Query 的取消逻辑，必须使用框架传递的 signal。
2. useMutation 未开启 cancelPrevious：默认情况下 useMutation 不会自动取消旧请求，需显式配置该参数。
3. queryKey 未正确更新：useQuery 仅在 queryKey 变化时触发新请求，确保 queryKey 包含所有影响请求的参数。

内容的提问来源于stack exchange，提问作者Fra