在RTK Query中API请求失败时如何设置默认数据？求最佳实践

一、为什么transformErrorResponse不适用 #

transformErrorResponse的作用是转换错误响应的格式，比如统一后端返回的错误结构，它无法让请求“成功”返回默认数据——因为它只处理错误信息，不会改变请求的失败状态，这就是你用它没成功的原因。

二、实现请求失败返回默认数据的两种常用方法 #

方法1：自定义baseQuery全局处理 #

如果多个端点都需要在失败时返回默认数据，可以封装自定义的baseQuery，在其中捕获请求错误并返回带默认数据的成功结果：

// 基于你的原baseQuery封装自定义逻辑
const customBaseQuery = async (args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => {
  const result = await baseQuery(args, api, extraOptions);
  
  // 请求失败时，返回默认数据作为成功响应
  if (result.error) {
    return { data: someDefaultListOfItems };
  }
  return result;
};

export const dummyApi = createApi({
  reducerPath: 'dummyApi',
  baseQuery: customBaseQuery, // 使用自定义baseQuery
  tagTypes: ['Dummy'],
  endpoints: (builder) => ({
    getDummy: builder.query<DummyItem[], void>({
      query: () => `/dummy`,
      providesTags: ['Dummy'],
      // 修正原代码的语法错误：箭头函数用return需加花括号
      transformResponse: (response: DummyApiResponse) => {
        return [...someDefaultListOfItems, ...response.data];
      },
    }),
  }),
});

方法2：用queryFn自定义单个端点逻辑 #

如果只有特定端点需要处理失败场景，直接用queryFn替代query，完全自定义请求流程：

export const dummyApi = createApi({
  reducerPath: 'dummyApi',
  baseQuery,
  tagTypes: ['Dummy'],
  endpoints: (builder) => ({
    getDummy: builder.query<DummyItem[], void>({
      queryFn: async (_args, api, extraOptions, baseQuery) => {
        try {
          const result = await baseQuery('/dummy', api, extraOptions);
          if (result.data) {
            // 成功时合并默认数据与接口返回数据
            const transformedData = [...someDefaultListOfItems, ...(result.data as DummyApiResponse).data];
            return { data: transformedData };
          }
          // 接口返回空数据时也返回默认值
          return { data: someDefaultListOfItems };
        } catch (error) {
          // 捕获请求错误，返回默认数据
          return { data: someDefaultListOfItems };
        }
      },
      providesTags: ['Dummy'],
    }),
  }),
});

三、最佳实践 #

• 按需选择方案：全局多个端点需要则用自定义baseQuery，单个端点需求则用queryFn，避免冗余代码。
• 保留错误状态（可选）：如果需要在组件中提示用户请求失败，可在返回默认数据时携带错误标记：

  return { 
    data: someDefaultListOfItems, 
    meta: { isRequestFailed: true, errorInfo: result.error } 
  };
  

  之后在组件中通过useGetDummyQuery()的meta属性获取该信息。
• 避免滥用默认数据：仅在默认数据能满足业务需求（如无网络时展示基础内容）时使用，关键业务场景仍需提示用户请求失败，不要用默认数据掩盖真实错误。
• 保证类型安全：确保默认数据的类型与端点定义的返回类型完全匹配（如示例中的DummyItem[]），避免TypeScript类型报错。

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