RTK Query是否支持并行请求？React+RTK Query如何实现多请求并行？

1. RTK Query 默认是否会并行发起请求？ #

是的，RTK Query 本身默认支持并行发起独立请求。比如在同一个组件中调用多个 useQuery 钩子时，这些请求会同时发送，不会互相阻塞——每个 useQuery 都是独立的实例，各自管理自身的请求生命周期。

2. React + RTK Query 实现多请求并行/并发的方法 #

方法一：直接使用多个 useQuery 钩子 #

这是最直观的方式，在组件内同时声明多个 useQuery，RTK Query 会自动并行处理这些请求。

示例代码：

import { useGetUserQuery, useGetPostsQuery, useGetCommentsQuery } from './apiSlice';

function MyComponent() {
  const { data: user } = useGetUserQuery(1);
  const { data: posts } = useGetPostsQuery(1);
  const { data: comments } = useGetCommentsQuery(1);

  if (!user || !posts || !comments) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

方法二：用 Promise.all 配合自定义 queryFn #

如果需要在单一逻辑中并行处理多个请求（比如自定义查询或 mutation 内部），可以直接用 Promise.all 包裹多个请求逻辑。

示例代码：

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

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    fetchUserAndPosts: builder.query({
      queryFn: async (userId) => {
        try {
          const [userRes, postsRes] = await Promise.all([
            fetch(`/api/users/${userId}`),
            fetch(`/api/users/${userId}/posts`)
          ]);
          const user = await userRes.json();
          const posts = await postsRes.json();
          return { data: { user, posts } };
        } catch (err) {
          return { error: err };
        }
      },
    }),
  }),
});

export const { useFetchUserAndPostsQuery } = api;

方法三：用 useLazyQuery 手动触发并行请求 #

如果需要在特定事件（如按钮点击）后才发起并行请求，可以使用多个 useLazyQuery，在事件处理函数中同时触发它们。

示例代码：

import { useLazyGetUserQuery, useLazyGetPostsQuery } from './apiSlice';

function MyComponent() {
  const [fetchUser, { data: user }] = useLazyGetUserQuery();
  const [fetchPosts, { data: posts }] = useLazyGetPostsQuery();

  const handleFetch = () => {
    // 并行触发两个请求
    fetchUser(1);
    fetchPosts(1);
  };

  return (
    <div>
      <button onClick={handleFetch}>加载用户和帖子</button>
      {user && <p>用户名：{user.name}</p>}
      {posts && (
        <ul>
          {posts.map(post => <li key={post.id}>{post.title}</li>)}
        </ul>
      )}
    </div>
  );
}

总结 #

RTK Query 原生支持并行请求，多个独立的 useQuery 会自动并行发起。若需要更灵活的控制，可结合 Promise.all 或 useLazyQuery 实现自定义并行逻辑。

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