如何从RTK Query错误响应中获取状态码与errorMessage？

我在使用带自定义baseQuery的Redux-Toolkit (RTK) Query，代码如下：

const staggeredBaseQueryWithBailOut = retry(
  async (args: FetchArgs | string, api, extraOptions) => {
    try {
      const result = await fetchBaseQuery({
        baseUrl: config.apiBaseURL,
        prepareHeaders: (headers, api) => {
          const {
            auth: { token }
          } = api.getState() as RootState
          if (isCustomQuery(args) && args.url === config.authURL) {
            headers.set("Authorization", `Basic ${config.basicToken}`)
          } else {
            if (token) headers.set("Authorization", `Bearer ${token}`)
          }
        }
      })(args, api, extraOptions)
      if (result.error) throw result
      return result
    } catch (error) {
      return { error: error }
    }
  },
  {
    maxRetries: 2
  }
)

当API调用失败时，接口会返回errorMessage字段，但useQueryHook返回的是RTKQ生成的无描述错误信息（如"FETCH_ERROR"），请问如何获取接口返回的errorMessage以及对应的状态码？

解决方案 #

核心问题是当前错误处理逻辑没有正确解析fetchBaseQuery返回的错误结构，导致接口原生的错误信息被覆盖。fetchBaseQuery返回的error对象包含服务器返回的status（状态码）和data（接口错误内容），只需调整错误处理逻辑即可保留这些信息。

修改后的完整代码 #

const staggeredBaseQueryWithBailOut = retry(
  async (args: FetchArgs | string, api, extraOptions) => {
    // 提前初始化baseQuery，让代码更清晰
    const baseQuery = fetchBaseQuery({
      baseUrl: config.apiBaseURL,
      prepareHeaders: (headers, api) => {
        const { auth: { token } } = api.getState() as RootState
        if (isCustomQuery(args) && args.url === config.authURL) {
          headers.set("Authorization", `Basic ${config.basicToken}`)
        } else if (token) {
          headers.set("Authorization", `Bearer ${token}`)
        }
        return headers // 必须返回修改后的headers，原代码遗漏了这一步
      }
    })

    const result = await baseQuery(args, api, extraOptions)

    // 针对性处理错误，保留接口返回的信息
    if (result.error) {
      // 服务器返回的结构化错误（包含status和data）
      if ('status' in result.error && 'data' in result.error) {
        return {
          error: {
            ...result.error,
            // 用接口返回的errorMessage替换默认错误信息
            message: result.error.data?.errorMessage || result.error.message
          }
        }
      }
      // 网络错误等非服务器返回的错误，直接返回原结果
      return result
    }

    return result
  },
  {
    maxRetries: 2
  }
)

关键修改点说明 #

1. 补全headers返回：原prepareHeaders函数没有返回修改后的请求头，会导致Authorization等设置不生效，这是基础错误，先修复。
2. 简化错误处理逻辑：移除不必要的try-catch，直接判断result.error即可，避免错误结构被额外包裹。
3. 提取接口错误信息：对服务器返回的错误，从result.error.data中取出errorMessage，覆盖默认的message字段，这样useQueryHook就能直接拿到自定义错误信息。

组件中使用示例 #

const { data, error, isLoading } = useYourCustomQuery()

if (error) {
  console.log('HTTP状态码:', error.status)
  console.log('接口错误信息:', error.message) // 这里会显示接口返回的errorMessage
}

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