如何限制Redux Toolkit Query同时执行的查询数量？

当然可以搞定！Redux Toolkit Query（RTK Query）本身没直接提供全局并发限制的开关，但我们有两种实用方案来实现「同一时间仅执行2个查询，完成一个再跑下一个」的需求，我给你详细拆解下：

方案一：组件级分批触发查询（适合特定页面） #

如果只是首页的查询需要限制并发，最直观的方式是在组件内通过状态控制查询的触发时机，把查询分成批次，等当前批次的查询全部完成后，再触发下一批。

核心思路是利用RTK Query的skip参数，控制哪些查询暂时不执行，再通过监听查询的完成状态来推进批次：

import { useState, useEffect } from 'react';
import { useGetUsersQuery, useGetPostsQuery, useGetCommentsQuery, useGetTagsQuery } from './apiSlice';

const HomePage = () => {
  // 控制当前执行的查询批次
  const [currentBatch, setCurrentBatch] = useState(0);

  // 第一批次：同时触发2个查询
  const { isSuccess: usersLoaded } = useGetUsersQuery(undefined, { skip: currentBatch < 1 });
  const { isSuccess: postsLoaded } = useGetPostsQuery(undefined, { skip: currentBatch < 1 });

  // 第二批次：等第一批次完成后再触发
  const { isSuccess: commentsLoaded } = useGetCommentsQuery(undefined, { skip: currentBatch < 2 });
  const { isSuccess: tagsLoaded } = useGetTagsQuery(undefined, { skip: currentBatch < 2 });

  // 监听第一批次完成情况，完成后推进到第二批次
  useEffect(() => {
    if (usersLoaded && postsLoaded && currentBatch === 1) {
      setCurrentBatch(2);
    }
  }, [usersLoaded, postsLoaded, currentBatch]);

  // 初始化触发第一批次
  useEffect(() => {
    setCurrentBatch(1);
  }, []);

  return (
    <div className="home-page">
      {/* 页面内容渲染 */}
    </div>
  );
};

export default HomePage;

这种方式的优点是简单直接，只针对目标页面生效，不需要修改全局配置；缺点是如果查询数量很多，批次管理会有点繁琐。

方案二：全局请求队列中间件（适合全应用统一限制） #

如果希望整个应用的所有RTK Query请求都遵守并发限制，可以通过自定义一个请求队列中间件，包装fetchBaseQuery来实现全局的并发控制。

核心思路是维护一个请求队列和并发计数器，当并发数小于设定的2时直接执行请求，否则把请求加入队列，等已有请求完成后再从队列取出下一个执行：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 配置全局并发限制
const MAX_CONCURRENT_REQUESTS = 2;
const requestQueue = [];
let activeRequestCount = 0;

// 包装fetchBaseQuery，添加并发控制逻辑
const limitedBaseQuery = async (args, api, extraOptions) => {
  const baseQuery = fetchBaseQuery({ baseUrl: '/api' });

  return new Promise((resolve, reject) => {
    // 定义实际执行请求的函数
    const executeRequest = async () => {
      activeRequestCount++;
      try {
        const result = await baseQuery(args, api, extraOptions);
        resolve(result);
      } catch (error) {
        reject(error);
      } finally {
        activeRequestCount--;
        // 当前请求完成后，执行队列里的下一个请求
        if (requestQueue.length > 0) {
          const nextRequest = requestQueue.shift();
          nextRequest();
        }
      }
    };

    // 判断是否可以立即执行请求
    if (activeRequestCount < MAX_CONCURRENT_REQUESTS) {
      executeRequest();
    } else {
      requestQueue.push(executeRequest);
    }
  });
};

// 创建API切片时使用带并发控制的baseQuery
export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: limitedBaseQuery,
  endpoints: (builder) => ({
    getUsers: builder.query({ query: () => '/users' }),
    getPosts: builder.query({ query: () => '/posts' }),
    getComments: builder.query({ query: () => '/comments' }),
    // ...其他接口定义
  }),
});

export const { useGetUsersQuery, useGetPostsQuery, useGetCommentsQuery } = apiSlice;

这种方式的优点是一劳永逸，全应用的RTK Query请求都会自动遵守并发规则；需要注意的是，如果请求失败需要重试，你可能需要在executeRequest里添加重试逻辑，避免队列阻塞。

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