RTK Query+React中已处理请求仍报控制台401错误，如何解决？

在使用RTK Query结合React开发时，编写了如下错误处理函数：

export const onAuthQueryStartedErrorToast = async (
  _: any,
  { queryFulfilled }: any,
) => {
  try {
    await queryFulfilled;
  } catch (error) {
    const isError = error as AuthErrorType;

    if (isError.error.data) {
      toast.warn(defineMessage(isError.error.data.message));
    } else {
      toast.warn("some error occured");
    }
  }
};

并在接口端点中配置了该处理函数：

export const AuthService = baseApi.injectEndpoints({
  endpoints: (builder) => {
    return {
      authMe: builder.query<AuthMeResponseType, void>({
        query: () => ({
          url: "v1/auth/me",
          method: "GET",
        }),
        onQueryStarted: onAuthQueryStartedErrorToast,
        providesTags: ["Auth"],
      }),
      // 其他端点...
    };
  },
});

目前错误提示功能正常，能弹出对应的toast，但控制台仍会输出401错误。看起来错误在处理函数执行前就被记录到控制台了，请问该如何消除这个控制台错误？

控制台输出401错误是因为RTK Query默认会将HTTP错误（如401）记录到控制台，即使你在onQueryStarted中捕获了错误。可以通过以下方式解决：

1. 单个端点配置errorPolicy #

在目标端点中添加errorPolicy: 'ignore'，RTK Query将不会把错误存入状态、不会触发全局onError钩子，也不会在控制台打印该错误，但不影响你在onQueryStarted中自定义的toast提示逻辑：

authMe: builder.query<AuthMeResponseType, void>({
  query: () => ({
    url: "v1/auth/me",
    method: "GET",
  }),
  onQueryStarted: onAuthQueryStartedErrorToast,
  providesTags: ["Auth"],
  errorPolicy: 'ignore' // 添加此行配置
}),

2. 全局配置errorPolicy #

如果希望所有端点都应用该规则，可在创建baseApi时全局设置：

const baseApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: () => ({}),
  errorPolicy: 'ignore' // 全局生效的错误策略
});

关于errorPolicy的可选值说明 #

• 'none'（默认）：错误会存入状态、触发onError钩子，并打印到控制台
• 'ignore'：不存入状态、不触发onError、不打印控制台，但onQueryStarted的queryFulfilled仍能捕获错误
• 'all'：错误会存入状态，但不会触发onError和控制台打印

结合你的需求，'ignore'是最适配的选择，既保留自定义错误处理，又消除了控制台冗余输出。

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