RTK-Query 中的 AxiosBaseQuery 错误处理答案

【问题标题】：AxiosBaseQuery error handling in RTK-QueryRTK-Query 中的 AxiosBaseQuery 错误处理
【发布时间】：2022-10-07 12:46:57
【问题描述】：

我有一个简单的 AxiosBaseQuery 与文档中提供的非常相似： https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

具体来说，在 catch 块中，您可以看到在发生错误时正在返回状态和数据。

   } catch (axiosError) {
      let err = axiosError as AxiosError
      return {
        error: {
          status: err.response?.status,
          data: err.response?.data || err.message,
        },
      }
    }

现在，这是我的基本查询，它调用 axiosBaseQuery 来进行一些标头操作：

export const baseQuery: BaseQueryFn<IBaseQuery,
  unknown,
  unknown> = async ({ url, method, data, params }, api, extraOptions) => {
  const token = (api.getState() as any).auth.token;

  const rawBaseQuery =  axiosBaseQuery({
    baseUrl: \'/\',
    headers: (headers) => {
        if (token) {
            headers[\"Authorization\"] = `Bearer ${token}`;
        }
        return headers
    }
  })

  return rawBaseQuery({ url, method, data, params }, api, extraOptions);
 
};

然后我调用 baseQuery 来添加 ReAuthentication 逻辑：

export const baseQueryWithReauth = async (args: IBaseQuery, api: BaseQueryApi, extraOptions: {}) => {
  let result = await baseQuery(args, api, extraOptions)

  if (result?.error) {
    console.log(\"error\", result.error)
    if (result.error.status == \"403\") {
      console.log(\'sending refresh token\')
      // send refresh token to get new access token 
      // other reAuth logic
    }
  }

  return result
}

问题是打字稿抱怨找不到status。当我尝试 console.log result 时，我可以看到该属性确实存在。

我正在尝试应用此处所述的建议 ReAuth 逻辑： https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-re-authorization-by-extending-fetchbasequery

我应该在 AxiosBaseQuery 中使用 FetchBaseQueryError 而不是 Unknown 吗？处理来自 AxiosBaseQuery 的错误的正确方法是什么？抱歉，我还在纠结 RTK-Query 和 React Native。

标签： react-native react-redux rtk-query

【解决方案1】：

您使用的 BaseQueryFn 类型有一大堆泛型：

export type BaseQueryFn<
  Args = any,
  Result = unknown,
  Error = unknown,
  DefinitionExtraOptions = {},
  Meta = {}
>

您正在使用BaseQueryFn<IBaseQuery, unknown, unknown>，这意味着Error（第三位）的类型是unknown。

我查看了您链接的文档，我发现该示例也使用 unknown 来表示错误。也许我应该解决这个问题:)

根据您返回的内容：

error: {
  status: err.response?.status,
  data: err.response?.data || err.message,
},

你可以看到你的错误类型应该是：

{ status: number; data: any }

或者，如果您想更严格：

{ status: number; data: unknown }

所以你的基本查询的类型应该是这样的：

export const baseQuery: BaseQueryFn<IBaseQuery,
  unknown,
  { status: number; data: any }
> = async () => ...

或者，使用一些导出的类型：

export type BaseQueryError = { status: number; data: any };

export type BaseQuery = BaseQueryFn<IBaseQuery, unknown, BaseQueryError>;

export const baseQuery: BaseQuery = async () => ...

【讨论】：