网络状态码
网络状态码是HTTP协议中服务器对客户端请求的响应状态标识，前端开发中高频用于接口调试、错误处理、性能优化（如缓存），尤其在字节国际电商场景中（如商品请求、支付回调、跨域资源加载、大文件上传下载），理解状态码的含义和场景能快速定位问题、提升用户体验。
以下按 状态码分类（1xx-5xx） 梳理，重点突出 核心含义+电商业务场景+前端应对策略（面试高分关键：不仅要懂“是什么”，还要懂“怎么用”）：
一、1xx 信息响应（临时响应，表示请求已接收，需继续处理）
特点：临时反馈，客户端通常无需主动处理，由浏览器自动跟进。
| 状态码 | 含义 | 常见场景 | 前端应对 |
|---|---|---|---|
| 100 Continue | 服务器已接收请求头，允许客户端继续发送请求体 | 1. 大文件上传（如电商商品视频上传，先发送请求头预检）；2. POST请求带大量数据（如批量提交订单） | 浏览器自动处理，无需手动干预 |
| 101 Switching Protocols | 服务器同意切换协议（如HTTP -> WebSocket） | 1. 电商实时聊天（客服沟通）；2. 订单状态实时推送（如支付结果回调） | 前端通过new WebSocket()发起协议切换，后续用WebSocket通信 |
二、2xx 成功响应（请求已成功处理）
特点：业务正常，前端可继续后续逻辑（如渲染数据、跳转页面）。
| 状态码 | 含义 | 电商核心场景 | 前端应对 |
|---|---|---|---|
| 200 OK | 通用成功（请求被正常处理） | 1. 查询商品列表/详情；2. 登录成功；3. 购物车更新 | 解析响应数据，渲染页面（如商品列表、订单信息） |
| 201 Created | 资源创建成功（POST请求导致新资源生成） | 1. 提交订单成功（创建订单记录）；2. 上传商品成功（创建商品资源）；3. 新增收货地址 | 提示“操作成功”，跳转页面（如订单确认页）或刷新列表 |
| 204 No Content | 成功但无响应体（服务器无需返回数据） | 1. 删除购物车商品；2. 取消订单；3. 批量操作（仅需确认结果，无需返回数据） | 不解析响应体，直接提示“删除成功”等反馈 |
| 206 Partial Content | 部分内容响应（仅返回请求的部分资源） | 1. 视频/音频分片加载（如商品宣传视频断点续传）；2. 大文件下载（如电商PDF说明书分片下载） | 前端拼接分片数据，实现断点续传、进度展示 |
三、3xx 重定向（请求需要进一步操作才能完成，客户端需跳转）
特点：核心是“资源位置变更”或“缓存命中”，前端需处理跳转逻辑或利用缓存优化性能。
| 状态码 | 含义 | 关键区别 | 电商核心场景 | 前端应对 |
|---|---|---|---|---|
| 301 Moved Permanently | 永久重定向（资源已永久迁移到新地址） | 浏览器会缓存新地址，后续请求直接跳新地址（SEO友好） | 1. 旧域名跳转新域名（如xxx.com -> new.xxx.com）；2. 商品链接变更（如/goods/123 -> /product/123） | 无需手动处理，浏览器自动跳转；若需兼容旧链接，可在前端路由配置重定向 |
| 302 Found | 临时重定向（资源临时迁移，未来可能恢复） | 不缓存跳转地址，每次请求都需经过服务器跳转 | 1. 未登录时访问订单页，跳登录页；2. 活动页面临时跳转（如秒杀活动结束跳商品列表） | 浏览器自动跳转，前端可监听跳转路径，记录原页面（登录后回跳） |
| 304 Not Modified | 协商缓存命中（资源未修改，无需重新下载） | 前端通过If-Modified-Since/If-None-Match请求头验证，服务器返回304并不带响应体 | 1. 商品图片、静态资源（CSS/JS）缓存；2. 首页数据缓存（短时间内重复访问无需重新请求） | 直接使用本地缓存资源，优化加载速度（面试高频：需理解协商缓存逻辑） |
| 307 Temporary Redirect | 临时重定向（不改变请求方法） | 与302的区别：302可能被浏览器转为GET请求，307严格保留原方法（如POST请求仍为POST） | 1. 支付回调临时跳转（需保留POST参数）；2. 临时维护页面跳转（POST请求不丢失） | 浏览器自动跳转，无需手动处理，适合需要保留请求方法的场景 |
| 308 Permanent Redirect | 永久重定向（不改变请求方法） | 与301的区别：301可能被转为GET，308保留原方法 | 永久域名变更且需保留POST请求（如支付接口域名迁移） | 浏览器缓存新地址，保留原请求方法跳转 |
四、4xx 客户端错误（请求本身有问题，服务器无法处理）
特点：责任在客户端（如参数错误、权限不足），前端需修复请求或提示用户。
| 状态码 | 含义 | 电商核心场景 | 前端应对（面试高分点） |
|---|---|---|---|
| 400 Bad Request | 请求参数错误（格式非法、缺少必填项） | 1. 提交订单时缺少收货地址；2. 商品搜索参数格式错误（如价格传字符串）；3. 表单校验失败（后端二次校验） | 1. 解析后端返回的错误信息（如“请选择收货地址”）；2. 前端加强表单校验，避免无效请求；3. 提示用户修正参数 |
| 401 Unauthorized | 未授权（缺少token、token过期或无效） | 1. 未登录访问订单列表/支付页面；2. token过期后提交订单；3. 跨域请求未带token | 1. 跳转登录页（记录原页面，登录后回跳）；2. 若为token过期，可尝试自动刷新token（如用refresh_token）；3. 提示“请先登录” |
| 403 Forbidden | 禁止访问（服务器拒绝执行，权限不足） | 1. 普通用户访问管理员接口（如修改商品价格）；2. 黑名单用户下单；3. 跨域请求被CORS拦截（服务器未允许） | 1. 提示“无权限操作”；2. 跳转首页或权限不足页面；3. 跨域场景：检查CORS配置（如是否允许当前域名、请求方法） |
| 404 Not Found | 资源不存在（请求路径错误或资源已删除） | 1. 访问不存在的商品详情页（如/product/9999，商品已下架）；2. 接口路径写错（如/api/goods -> /api/good）；3. 静态资源丢失（如商品图片链接失效） | 1. 渲染404页面（提示“页面不存在”）；2. 检查接口路径、商品ID是否正确；3. 图片失效时显示默认占位图 |
| 405 Method Not Allowed | 请求方法错误（服务器不支持该HTTP方法） | 1. 用GET请求提交订单（接口仅支持POST）；2. 用DELETE请求查询商品（接口仅支持GET） | 1. 核对接口文档，修正请求方法（如GET -> POST）；2. 前端封装请求时统一规范方法（如POST提交、GET查询） |
| 408 Request Timeout | 请求超时（服务器未在规定时间内收到完整请求） | 1. 网络差时加载商品列表；2. 大文件上传时网络中断；3. 接口响应过慢（如复杂查询） | 1. 提示“网络超时，请重试”；2. 实现重试机制（如最多重试3次，间隔1s）；3. 大文件上传用分片+断点续传 |
| 409 Conflict | 资源冲突（请求与服务器现有资源冲突） | 1. 创建商品时SKU重复；2. 同一订单重复支付；3. 用户名已被注册 | 1. 提示“该SKU已存在，请修改”等具体冲突信息；2. 避免重复提交（如按钮置灰、加防抖） |
| 429 Too Many Requests | 请求过于频繁（触发服务器限流） | 1. 秒杀活动时频繁点击下单；2. 批量查询商品时请求次数过多；3. 接口限流（如每分钟最多100次请求） | 1. 提示“请求过于频繁，请稍后再试”；2. 前端做节流/防抖（如秒杀按钮1s内只能点1次）；3. 实现退避重试（重试间隔逐渐延长）；4. 显示限流倒计时 |
| 431 Request Header Fields Too Large | 请求头过大（如token过长、自定义头信息过多） | 1. token包含过多信息（如用户权限、角色）；2. 跨域请求带过多自定义头 | 1. 缩减请求头大小（如token用短时效、精简信息）；2. 拆分自定义头信息，或通过请求体传递；3. 联系后端调整请求头大小限制 |
五、5xx 服务器错误（服务器处理请求时出错，责任在服务器）
特点：客户端请求本身无问题，但服务器端异常，前端需友好提示并规避影响。
| 状态码 | 含义 | 电商核心场景 | 前端应对（面试高分点） |
|---|---|---|---|
| 500 Internal Server Error | 服务器内部错误（代码bug、数据库异常等） | 1. 订单提交时数据库插入失败；2. 接口代码逻辑错误（如空指针）；3. 第三方服务调用失败（如支付接口超时） | 1. 提示“服务器繁忙，请稍后再试”；2. 记录错误日志（如通过Sentry上报）；3. 避免用户重复操作（如按钮置灰）；4. 联系后端排查问题 |
| 502 Bad Gateway | 网关错误（服务器作为网关/代理，收到上游服务器无效响应） | 1. Nginx转发请求失败（如后端服务宕机）；2. 微服务之间调用失败（如商品服务调用库存服务超时）；3. 跨域代理配置错误 | 1. 提示“服务暂时不可用，请重试”；2. 重试机制（间隔2s，最多3次）；3. 大促场景：切换备用接口或降级展示（如不显示库存数量） |
| 503 Service Unavailable | 服务不可用（服务器过载、维护中，暂时无法处理请求） | 1. 电商大促时服务器压力过大；2. 服务器维护（如凌晨更新）；3. 服务熔断（如库存服务故障） | 1. 渲染维护页面（提示“系统维护中，预计XX时间恢复”）；2. 定时轮询检测服务是否恢复；3. 大促场景：流量削峰（如排队页面） |
| 504 Gateway Timeout | 网关超时（服务器作为网关/代理，未及时收到上游服务器响应） | 1. 复杂查询接口（如查询用户近一年订单）响应过慢；2. 数据库查询超时；3. 第三方接口（如物流查询）超时 | 1. 提示“请求超时，请稍后重试”；2. 优化用户操作（如分页查询订单，而非一次性加载）；3. 后端接口超时配置调整（如延长超时时间） |
面试高频考点&高分记忆技巧
1. 核心区别速记（避免混淆）
- 401 vs 403：401是“没登录/没token”，403是“已登录但没权限”（比如游客 vs 普通用户访问管理员页面）；
- 301 vs 302：301是“永久搬家”（缓存新地址），302是“临时出差”（不缓存）；
- 502 vs 504：502是“网关收到无效响应”（上游服务挂了），504是“网关等太久没收到响应”（上游服务卡了）；
- 204 vs 304：204是“成功无数据”（删除操作），304是“缓存命中无数据”（静态资源）。
2. 电商场景必记状态码（结合业务更易记）
- 缓存优化：304（静态资源、商品图片）；
- 权限处理：401（未登录）、403（无权限）；
- 限流秒杀：429（请求频繁）；
- 大文件/视频：206（分片）、100（预检）；
- 服务异常：503（维护）、502（网关错误）。
3. 前端统一处理方案（体现工程化思维）
在字节等大厂项目中，通常会用Axios拦截器统一处理状态码，示例逻辑：
javascript
axios.interceptors.response.use(
(response) => response, // 2xx直接返回
(error) => {
const status = error.response?.status;
switch (status) {
case 401:
// 跳转登录页，记录回跳地址
window.location.href = `/login?redirect=${encodeURIComponent(window.location.pathname)}`;
break;
case 403:
ElMessage.error("无权限操作，请联系管理员");
break;
case 404:
// 跳404页面
window.location.href = "/404";
break;
case 429:
ElMessage.error("请求过于频繁，请1分钟后重试");
break;
case 503:
// 跳维护页面
window.location.href = "/maintenance";
break;
default:
ElMessage.error("服务器繁忙，请稍后再试");
// 上报错误日志
reportError(error);
}
return Promise.reject(error);
}
);总结
面试中回答状态码时，需遵循“分类记忆+场景结合+前端应对”的逻辑：先明确状态码所属类别（成功/重定向/错误），再结合电商业务场景举例（如304用于商品图片缓存），最后说明前端如何处理（如401跳登录、429限流提示），体现“理论+实践”的能力，这正是字节等大厂看重的核心素质。