Axios 默认将 HTTP 状态码 ≥ 400 的响应视为错误并抛出异常,但错误对象本身不直接暴露响应体;需通过 error.response.data 访问后端返回的结构化错误信息(如 { data: { message: 'Email already exists.' } })。
axios 默认将 http 状态码 ≥ 400 的响应视为错误并抛出异常,但错误对象本身不直接暴露响应体;需通过 `error.response.data` 访问后端返回的结构化错误信息(如 `{ data: { message: 'email already exists.' } }`。
当使用 Axios 发起请求时,若服务端返回 400、401、500 等非成功状态码(即 status >= 400),Axios 不会将响应体自动注入 catch 块中的 err 对象顶层属性,而是将其封装在 err.response 中。这意味着直接 console.error(err) 只会打印 AxiosError 实例,而无法看到你精心设计的 JSON 错误结构。
✅ 正确做法是:在 catch 中检查 err.response 是否存在(确保是响应类错误,而非网络错误或超时),再逐层访问 data 字段:
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
const handleSignup = async () => {
try {
setIsLoading(true);
const res = await axios({
url: 'http://10.0.2.2:8080/signup',
method: 'POST',
data: { name, email, password },
});
Alert.alert(res.data.message);
} catch (err) {
// ✅ 安全访问后端错误响应
if (err.response && err.response.data && err.response.data.data?.message) {
Alert.alert('注册失败', err.response.data.data.message);
} else if (err.request) {
// 请求已发出但未收到响应(如网络中断)
Alert.alert('网络错误', '请检查网络连接');
} else {
// 其他错误(如配置异常)
Alert.alert('请求异常', '请稍后重试');
}
console.error('Signup error:', err);
} finally {
setIsLoading(false);
}
};
⚠️ 注意事项:
- err.response 仅在服务端返回了 HTTP 响应时存在;若请求根本未发出(如 DNS 失败、跨域拦截、本地网络断开),err.request 为 true,此时 err.response 是 undefined,直接访问会报错;
- 后端返回结构需与前端解析逻辑一致——本例中服务端发送的是 { data: { message: '...' } },因此前端取值路径为 err.response.data.data.message;
- 强烈建议统一错误响应格式(例如始终包含 code、message、details 字段),并在前端封装通用错误处理器,避免重复判断;
- 开发阶段可配合 axios.interceptors.response.use() 全局拦截错误响应,提前标准化处理逻辑。
掌握这一模式,即可稳定、健壮地从 Axios 错误中提取业务级提示信息,显著提升用户体验与调试效率。










