如何在 axios 中使用反应查询突变？

Question

我正在尝试使用axios 使用反应查询突变，但是当我的请求返回 http 错误时，我catch()没有被调用。

这是我尝试过的：

const BannerRightConfirmEmail = () => {
  const [{ token }] = useState<ITokenConfirmationEmailParam>(useParams());
  const [mutateConfirmEmail] = useMutation(confirmEmailUser);

  useEffect(() => {
    confirmEmail();
  }, []);

  const confirmEmail = async () => {
    try {
      await mutateConfirmEmail(token);
    } catch (errorReq) {
      console.log(errorReq);
    }
  };

我的user.service.ts：

const confirmEmailUser = async (token: string) => {
  await api.patch('/users/confirmEmail/' + token)
}

export { confirmEmailUser }

我的 api.ts：

const api = axios.create({
  baseURL: "http://localhost:3100",
});

我的请求返回 400 错误状态，但我的 中没有打印任何内容catch()，为什么？

Answer 1

mutate 函数处理异常，因此 catch 块永远不会运行。您可以使用onError可以在钩子或变异函数级别设置的处理程序函数来处理错误。例如：

const [
   mutate,
   { status, isIdle, isLoading, isSuccess, isError, data, error, reset },
 ] = useMutation(mutationFn, {
   onError(err, variables, onMutateValue) {
      // error handling logic
      // fires after the mutate-level handler
   }
 })
const promise = mutate(variables, {
   onError(err, variables, onMutateValue) {
      // error handling logic
      // fires before the hook-level handler
   }
 })

mutationFn作为替代方案，您还可以将传递的错误处理逻辑移至useMutation如下所示：

const confirmEmailUser = async (token: string) => {
  let response;
  try {
    response = await api.patch('/users/confirmEmail/' + token)
  } catch (errorReq) {
    console.log(errorReq);
  }
  return response;
}

export { confirmEmailUser }

这样你就可以在错误到达之前处理它react-query