React Query问题：Axios报错时isLoading与isError状态未更新

问题根源 #

React Query的Mutation依赖执行函数抛出的异常来更新isLoading和isError状态。如果Axios的错误没有被正确传递到Mutation的执行函数，就会导致状态无法正常变更。

解决方案步骤 #

1. 确保Axios全局拦截器正确传递错误 #

检查项目中是否存在Axios全局响应拦截器，如果有，必须在错误处理逻辑中重新抛出错误，而非返回resolved状态的Promise：

import axios from 'axios';

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    // 可在此添加错误日志等自定义处理，但必须返回rejected Promise
    return Promise.reject(error);
  }
);

若拦截器错误处理返回Promise.resolve(error)，会导致Axios请求被标记为成功，错误无法传递到React Query。

2. 修改HttpClient类，显式抛出Axios错误 #

在HttpClient.post方法中添加try/catch块，确保错误被正确抛出，避免潜在的异常吞没来导致状态异常：

export class HttpClient {
  static async post(url, data, options) {
    try {
      const response = await Axios.post(url, data, options);
      return response.data;
    } catch (error) {
      // 显式抛出错误，确保React Query能捕获到
      throw error;
    }
  }
}

3. 验证Mutation的错误处理逻辑 #

调用registerUser时，不要通过try/catch吞掉错误（注意：mutate方法不返回Promise，无需await；若使用mutateAsync则需处理Promise异常）：

async function onSubmit({ email, password }) {
  registerUser(
    { email, password },
    {
      onSuccess: (data) => {
        // 处理成功逻辑
      },
      onError: (error) => {
        // 处理表单错误
        console.error('注册失败:', error);
      },
    }
  );
}

若使用mutateAsync，需确保错误被抛出：

async function onSubmit({ email, password }) {
  try {
    await registerUser({ email, password });
  } catch (error) {
    // 处理错误
    console.error('注册失败:', error);
  }
}

4. 验证React Query的状态使用 #

确保正确解构Mutation的状态，无拼写错误：

const { mutate: registerUser, isLoading, isError } = useRegisterMutation();

注意：isLoading会在mutation发起后变为true，请求结束（无论成功/失败）后变为false；isError仅在执行函数抛出异常时变为true。

额外排查点 #

• 查看浏览器控制台是否有未捕获的异常，确认错误是否被正确抛出
• 确认React Query的Provider已正确包裹应用根组件，确保上下文正常工作

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