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

Question

我正在尝试通过 axios 使用 react-query mutations，但是当我的请求 return 出现 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",
});

我的请求是 return400 错误状态，但我的 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

之前处理错误

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

How use react-query mutations with axios?

react-query