RTK Query中fetchBaseQuery超时设置无效，如何配置10秒超时？

核心问题定位 #

超时参数未生效的原因几乎都是配置位置错误——timeout必须作为fetchBaseQuery的直接配置项传入，而非createApi的顶层参数或端点配置里。

正确的10秒超时配置写法 #

修改你的基础API切片，将timeout直接放在fetchBaseQuery的配置对象中：

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

export const apiSlice = createApi({
  reducerPath: 'api',
  // 重点：timeout直接传入fetchBaseQuery的配置
  baseQuery: fetchBaseQuery({
    baseUrl: '/your-api-base-url',
    timeout: 10000, // 10秒超时，单位为毫秒
  }),
  endpoints: (builder) => ({
    // 你的基础端点定义
  }),
});

扩展切片的继承逻辑 #

如果postsApiSlice是通过injectEndpoints扩展自apiSlice，无需重复设置timeout——它会自动继承baseQuery的配置：

// postsApiSlice.js
import { apiSlice } from './apiSlice';

export const postsApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
      // 这里不需要单独设置timeout
    }),
  }),
});

export const { useGetPostsQuery } = postsApiSlice;

常见错误排查 #

• 不要把timeout放在createApi的顶层（和reducerPath、endpoints同级），fetchBaseQuery不会识别这个位置的参数。
• 如果请求中自定义了signal参数，会覆盖baseQuery的timeout逻辑，需移除或合并处理。
• 检查是否在transformRequest/transformResponse中意外修改了AbortController的逻辑。

组件中正常使用 #

组件无需额外配置，直接用生成的hooks即可：

// Post.jsx
import { useGetPostsQuery } from './postsApiSlice';

export default function Post() {
  const { data, error, isLoading } = useGetPostsQuery();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  return (
    <div>
      {data?.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

配置完成后，所有通过该baseQuery发起的请求都会在10秒后自动终止，解决之前超时不生效的问题。

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