react-query中useMutation错误触发onSuccess而非onError的问题

问题根源 #

你的Axios请求封装里，onError函数捕获错误后直接返回了错误对象，这会改变Promise的状态：

const onError = error => {
    console.error('AXIOS !!!!!  Request Failed:', error.config.url);
    return error // 这里是核心问题：返回错误会让rejected的Promise转为resolved
};

Promise的运行机制是：catch块如果返回一个值（哪怕是错误对象），整个Promise链会变成**已兑现（resolved）状态。而React Query的useMutation仅在传入的函数返回的Promise被拒绝（rejected）**时，才会触发onError回调。所以即便Axios捕获到了错误，因为你返回了错误对象，Promise状态变为resolved，useMutation就会误判为请求成功，触发onSuccess。

解决方法 #

修改Axios的onError函数，将返回错误改为重新抛出错误，让Promise保持rejected状态：

const onError = error => {
    console.error('AXIOS !!!!!  Request Failed:', error.config.url);
    throw error; // 重新抛出错误，维持Promise的rejected状态
};

这样当请求失败时，Axios返回的Promise会保持拒绝状态，useMutation就能正确识别错误并触发onError回调。

如果需要在Axios层面做统一错误处理（比如401权限失效跳转），处理完成后仍要抛出错误，确保Promise的拒绝状态不被覆盖，上层的useMutation才能正常感知错误。

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