如何修改RTK Query响应错误格式

你可以通过RTK Query提供的transformErrorResponse配置项，重新格式化错误响应结构，把嵌套的错误信息扁平化。

具体实现 #

在创建API切片（createApi）时，添加transformErrorResponse配置对原始错误对象做转换：

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

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    // 这里定义你的接口
  }),
  // 配置错误格式转换
  transformErrorResponse: (originalError) => {
    return {
      message: originalError.data?.message || '请求失败',
      status: originalError.status
    }
  }
})

说明 #

• transformErrorResponse会接收原始错误对象作为参数，也就是你拿到的包含data和status的嵌套结构
• 我们直接从originalError.data中提取message，同时保留originalError.status，组合成新的扁平化错误对象返回
• 用originalError.data?.message的可选链判断，避免后端返回的错误结构不符合预期时出现报错
• 如果后端没有返回message字段，可以设置一个默认提示，比如'请求失败'

配置完成后，后续接口请求返回错误时，你拿到的错误结构就会变成目标格式：

error: {
  message: 'error!',
  status: 400,
}

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