JavaScript 中 HTTP 请求失败应分网络错误、HTTP 状态码错误、解析错误三类处理，fetch 需手动检查 res.ok 和解析 JSON，axios 可用拦截器统一提示，禁用 alert() 改用 toast 等轻量 UI。
在 JavaScript 中，HTTP 请求失败时弹出友好错误提示，关键不是简单 alert() 一个“请求失败”，而是要识别错误类型、提取可读原因、给出明确反馈。下面从常用场景出发，提供实用做法。
区分网络错误、HTTP 状态码错误和解析错误
现代 fetch 或 axios 都不会自动抛错（比如 404、500），需手动判断。常见三类错误要分开处理：
-
网络层失败：如断网、域名无法解析、请求被 CORS 拦截（此时
fetch会直接 reject，axios也会进catch） -
HTTP 状态异常：如 400（参数错误）、401（未登录）、403（无权限）、404（资源不存在）、500（服务端异常）——这些响应能拿到 body，但需主动检查
response.ok或response.status -
响应体解析失败：如后端返回了非 JSON 内容（HTML 错误页、空响应），
response.json()会报错
用 fetch 实现带状态码语义的提示
示例代码（含注释）：
async function fetchWithFeedback(url) {
try {
const res = await fetch(url);
// 第一步：检查 HTTP 状态
if (!res.ok) {
let message = `请求失败：${res.status} ${res.statusText}`;
// 根据状态码补充用户能理解的提示
if (res.status === 401) message = '登录已过期，请重新登录';
if (res.status === 403) message = '您没有访问该功能的权限';
if (res.status === 404) message = '请求的资源不存在，请检查链接或稍后重试';
if (res.status >= 500) message = '服务器开小差了，请稍后再试';
// 尝试读取后端返回的错误详情（如 { "message": "用户名已存在" }）
try {
const data = await res.json();
if (data.message && typeof data.message === 'string') {
message = data.message;
}
} catch (e) {
// 解析失败就用默认提示
}
throw new Error(message);
}
// 第二步：安全解析 JSON
const data = await res.json();
return data;
} catch (err) {
// 统一处理所有错误（网络失败 / 状态码异常 / JSON 解析失败）
const userMessage = err.message || '网络连接异常，请检查网络后重试';
alert(userMessage); // 或用更友好的 UI 弹窗（如 Toast）
throw err; // 保留错误供上层处理
}
}
用 axios 更简洁地统一拦截错误
借助 axios 的响应拦截器和错误拦截器，避免每个请求重复写判断逻辑：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
// 创建实例并配置拦截器
const api = axios.create({ baseURL: '/api' });
// 响应拦截器：统一处理 2xx 以外的状态
api.interceptors.response.use(
(res) => res,
(error) => {
let message = '未知错误';
if (error.response) {
// HTTP 错误（有响应体）
const { status, data } = error.response;
if (data?.message) {
message = data.message;
} else if (status === 401) {
message = '登录已过期，请重新登录';
} else if (status === 403) {
message = '权限不足，无法执行此操作';
} else if (status >= 500) {
message = '服务器暂时不可用，请稍后重试';
} else {
message = `请求失败（${status}）`;
}
} else if (error.request) {
// 网络错误（无响应）
message = '网络连接失败，请检查网络设置';
} else {
// 其他错误（如配置错误）
message = '请求配置异常';
}
// 弹出友好提示（推荐用轻量 UI 库如 toast，而非 alert）
toast.error(message);
return Promise.reject(error);
}
);
不推荐 alert()，建议用轻量 UI 提示
alert() 会阻塞页面、体验生硬，且无法自定义样式。生产环境推荐：
- 使用 react-toastify（React）
- 使用 SweetAlert2（通用）
- 自己封装一个简单的
showToast(message)函数，用 div + CSS 动画实现
例如一句 toast.error('用户名已存在')，比弹窗更自然，也不打断用户操作流。
