React Query接收服务器422状态码时isError为false不抛出错误问题求解

问题根因 #

你的signin请求函数主动“吞掉”了错误，导致React Query无法识别到请求失败：
React Query默认只会在查询/变更函数返回rejected状态的Promise时，才会将状态标记为isError = true，同时填充error字段。但你在代码末尾的catch回调中直接返回了错误对象，Promise规范中如果catch回调没有抛出新错误、而是返回普通值，整个Promise链的状态会被重置为fulfilled（成功状态），相当于错误被你提前消化了，React Query只会认为请求成功。

修复方案 #

1. 移除请求末尾的catch逻辑，或者在catch中重新抛出错误，让错误可以透传到React Query层：

export const signin = (user) => {
  return fetch(`${API}/signin`, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(user),
  })
    .then((response) => {
      if (!response.ok) {
        // 优化点：解析后端返回的错误详情再抛出，方便后续取错误信息
        return response.json().then(errInfo => {
          throw new Error(errInfo.message || `请求失败，状态码：${response.status}`)
        })
      }
      return response.json();
    })
    // 要么删掉这段catch，要么改写成抛出错误
    // .catch((err) => { throw err });
};

2. 如果你有全局统一的错误处理逻辑，也可以把错误捕获逻辑放到React Query的全局配置、或者对应mutation的onError回调中处理，不要在请求函数里吞掉错误。

内容的提问来源于stack exchange，提问作者χerфmiи