Angular中使用TanStack Query更新查询参数时取消旧API调用

核心思路 #

TanStack Query 本身支持通过 AbortSignal 取消请求，结合手动取消旧查询的方式，可完美解决多下拉框快速切换时的冗余请求问题，无需依赖RxJS。

步骤1：给查询设置带筛选参数的Query Key #

确保查询Key包含所有下拉框的筛选参数，让每个不同的参数组合对应唯一的查询标识，方便后续精准取消旧请求：

const filters = {
  category: selectedCategory,
  brand: selectedBrand,
  priceRange: selectedPriceRange
};

const { data } = useQuery({
  queryKey: ['filteredData', filters], // 用参数组合作为Query Key的一部分
  queryFn: fetchFilteredData,
  staleTime: 0 // 可选：确保每次参数变化都发起新请求
});

步骤2：在QueryFn中传递AbortSignal #

让API请求支持AbortSignal，这样TanStack Query可以在需要时自动终止旧请求。以下是两种常见请求库的实现：

用Fetch API：

const fetchFilteredData = async ({ queryKey, signal }) => {
  const [_, filters] = queryKey;
  const params = new URLSearchParams(filters);
  const res = await fetch(`/api/your-endpoint?${params}`, { signal });
  
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

用Axios：

import axios from 'axios';

const fetchFilteredData = async ({ queryKey, signal }) => {
  const [_, filters] = queryKey;
  const res = await axios.get('/api/your-endpoint', {
    params: filters,
    signal // 传递AbortSignal给Axios
  });
  return res.data;
};

步骤3：筛选条件变化时取消旧请求 #

每当下拉框值变化（URL查询参数更新）时，调用queryClient.cancelQueries取消所有未完成的同类请求：

import { useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom'; // 假设用React Router管理URL参数

const queryClient = useQueryClient();
const [searchParams, setSearchParams] = useSearchParams();

// 下拉框选择事件处理
const handleSelectChange = (key, value) => {
  // 先取消所有未完成的filteredData查询
  queryClient.cancelQueries({ 
    queryKey: ['filteredData'], 
    exact: false // 匹配所有以filteredData为前缀的查询
  });
  
  // 更新URL查询参数
  setSearchParams(prev => {
    prev.set(key, value);
    return prev;
  });
};

如果是通过状态管理筛选参数而非URL，同样在状态更新前执行取消操作：

const [filters, setFilters] = useState({});

const handleSelectChange = (key, value) => {
  queryClient.cancelQueries({ queryKey: ['filteredData'], exact: false });
  setFilters(prev => ({ ...prev, [key]: value }));
};

为什么这样有效？ #

• 每个参数组合对应唯一的Query Key，确保新请求触发时不会和旧请求混淆。
• AbortSignal让API请求可以被主动终止，避免无效请求占用资源。
• 手动取消旧请求确保只有最新的请求会被处理，彻底解决快速切换时的冗余请求问题。

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