Tanstack React Query useMutation onSuccess始终触发，onError未执行

数据老陈

2026-6-26

问题原因与解决方法

核心问题出在你mutationFn里的axios请求错误处理逻辑：

你给每个axios请求都加了.catch(error => error.response.data)，这会把axios抛出的400/500错误捕获，然后把错误响应数据作为返回值返回给mutationFn。而React Query的useMutation判断mutation是否失败的标准是：mutationFn是否抛出异常。你现在把错误“吞”掉了，反而返回了一个值，相当于告诉React Query“这个请求成功完成了”，所以只会触发onSuccess，onError永远不会执行。

解决方法有两种：

方法一：移除局部catch，让错误向上抛出

直接删掉每个请求里的.catch块，让axios的错误自然冒泡到useMutation处理：

case 'create':
  return await api
    .post(
      `/admin/services/`,
      JSON.stringify(values !== undefined ? values : {})
    )
    .then((res) => res.data);
// 其他update/delete请求同理去掉catch

这样axios遇到4xx/5xx状态码时会抛出错误，useMutation就能捕获到，进而触发onError，同时error变量也会拿到对应的错误信息。

方法二：捕获错误后重新抛出，保留错误响应数据

如果你需要在错误里带上服务器返回的响应数据，可以在catch里自定义错误并重新抛出：

case 'create':
  return await api
    .post(
      `/admin/services/`,
      JSON.stringify(values !== undefined ? values : {})
    )
    .then((res) => res.data)
    .catch((error) => {
      // 自定义错误，把响应数据挂载到错误对象上
      const customError = new Error('服务请求失败');
      customError.responseData = error.response.data;
      throw customError;
    });

这样既保留了错误响应数据，又能让useMutation捕获到异常，触发onError。