javascript - 为什么 axios 在 catch 以后依然还在执行上面的逻辑？

Question

我想问为什么接口在 500 之后依然会进行跳转呢？难道不是 catch 然后弹窗报错了么？

const Api_Common = async (Path: string, Function: string, Params: any = {}) => await axios    .post(`host`, Params)    .then((data: Response) => data.data.Response)    .catch((e) => {        return ErrorState.dispatch(Publish(e.response.data.Error))    })

const Api_Account_Register = (mobile: string, password: string, captcha: string) => Api_Common( Path, "account_register", {    mobile: mobile,    password: password,    captcha: captcha})

 Api_Account_Register( mobile, password, code )            .then(() => messageApi.success('注册成功').then(() => navigate('/首页')))

Answer 1

Api_Common确实catch了，但是catch没有继续把错误抛出，catch返回了一个新的promise，也就继续执行Api_Account_Register后面的then了

MDN - Promise.catch

Answer 2

从你提供的代码来看，catch 语句是在 Api_Common 函数中定义的，这个函数捕获了 axios 请求中可能出现的错误。当接口返回状态为 500 时，axios 将会抛出一个错误，这个错误会被 catch 语句捕获，然后调用 ErrorState.dispatch(Publish(e.response.data.Error)) 弹窗报错。

如果你在接口返回 500 之后依然看到了跳转，那么可能是你的 catch 语句没有正确捕获到错误，或者你的错误处理逻辑存在问题。

请检查以下几点：

1. 确保 catch 语句是在正确的地方调用的。在你的代码中，catch 语句是在 Api_Common 函数中定义的，这个函数会捕获所有通过该函数发送的 axios 请求的错误。
2. 确保你的服务器返回的错误信息是正确的。在你的代码中，错误信息存储在 e.response.data.Error 中，你需要确保服务器返回的错误信息能正确地被 axios 获取并存储到这个变量中。
3. 检查你的错误处理逻辑。在你的代码中，错误被捕获后，会调用 ErrorState.dispatch(Publish(e.response.data.Error)) 弹窗报错。你需要确保这个逻辑能正确地处理错误。

如果以上都没有问题，那么可能需要进一步检查你的代码或者调试你的程序来确定问题的原因。