JavaScript(React)中如何在try-catch块内获取捕获的错误内容

Axios捕获的请求错误不是统一结构，需要分场景读取，服务端返回的响应内容统一挂载在error.response属性下，你需要的{data:{errormessage:xxx}}结构就存在这个属性中。

错误对象的三类常见场景 #

• 服务端成功收到请求并返回非2xx状态码（比如400、401、500）：错误对象携带response字段，包含HTTP状态码、响应头、服务端返回的完整响应体data
• 请求成功发出但未收到服务端响应：比如断网、跨域拦截、请求超时，错误对象携带request字段，不存在response属性
• 请求初始化阶段就触发错误：比如参数格式错误、拦截器逻辑报错，错误对象直接携带message字段说明错误原因

适配注册场景的修改代码 #

读取错误信息时必须做兜底判断，避免无response场景下读取属性触发二次报错，修改后的完整逻辑如下：

const submitRegister = async () => {         
    try {
        const data = await axios.post(apiurl, {email: email, password: password, auth: auth})
        console.log(data.data)
        navigation.navigate('LoginScreen')
    }
    catch (error) {
        console.log(error)
        let errMsg = '注册失败，请稍后重试'
        // 优先读取服务端返回的自定义错误信息
        if (error.response?.data?.errormessage) {
            errMsg = error.response.data.errormessage
        } else if (error.response?.status === 400) {
            errMsg = '注册信息填写有误，请检查后重新提交'
        } else if (error.request) {
            errMsg = '网络连接异常，请检查网络设置后重试'
        } else if (error.message) {
            errMsg = error.message
        }
        setErrorMessage(errMsg)
    }
}

补充说明 #

• 代码中使用的?.是ES2020可选链操作符，如果你的项目构建环境不支持该语法，可以替换为逐层判断写法：if (error.response && error.response.data && error.response.data.errormessage)
• 如果需要根据HTTP状态码做特殊业务逻辑，直接读取error.response.status即可
• 禁止直接硬读error.response.data.xxx而不做判空，否则遇到网络错误等无响应场景会直接抛出JS异常，导致页面崩溃

内容的提问来源于stack exchange，提问作者Rollor