axios cancelToken，使取消的请求静默失败

Question

我正在使用 react-hook-form

创建一个验证帐号 onChange 的输入表单

 useEffect(() => {
    if (account_number.length >= 6) {
      verifyAccountNumber();
    }
    return () => source.cancel('Request canceled!');
  }, [account_number, bank_code, verifyAccountNumber]);

verifyAccountNumber 函数在 account_number 和 bank_code 状态更改时运行。

这是实际的功能

const verifyAccountNumber = useCallback(async () => {
    setAccountLoading(true);
    setAccountError({ status: false, serverError: false });
    try {
      const account = await restAPI.get(
        `/misc/verify-account/${account_number}/${bank_code}`,
        { cancelToken: token }
      );
      setAccount(account.data.data.data.account_name);
    } catch (err) {
      console.log(err);
      if (!axios.isCancel(err)) {
        setAccountError({
          status: true,
          serverError: err.response.data.serverError,
        });
      }
    }
    setAccountLoading(false);
  }, [account_number, bank_code]);

有没有办法防止 try catch 块将已取消的请求捕获为错误？因为它弄乱了我的 UI/UX

Answer 1

如果你想防止捕获取消错误，你必须在你的情况下重新抛出它。

if (axios.isCancel(err)) { 
    throw err 
} else { 
    setAccountError(...) 
}

（评论中的答案记录此问题已解决）

axios cancelToken，使取消的请求静默失败

Axios cancelToken, make cancelled request fail silently

javascript

request

reactjs

axios

react-hook-form