【高频考点精讲】前端Mock服务：如何模拟各种网络异常场景？

前端Mock服务：如何模拟各种网络异常场景？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊前端开发中一个特别实用但又经常被忽视的技能——如何用Mock服务模拟各种网络异常场景。

你们有没有遇到过这种情况？本地开发时一切正常，一上线就各种网络问题：请求超时、接口404、服务器500错误...这时候才想起来："哎呀，我本地都没测过这些异常情况！"（全栈老李提醒：这就是典型的"开发环境综合征"）

为什么需要模拟网络异常？

想象一下，你开发了一个电商网站，用户在下单时突然断网了，你的前端会怎么处理？直接白屏？还是优雅地提示"网络不稳定，请稍后再试"？前者可能会让你丢掉这个订单，后者才是专业的做法。

真实世界的网络环境远比我们的开发环境复杂：

• 移动端用户在地铁里信号时好时坏
• 服务器可能突然宕机
• CDN节点可能出现故障
• 用户的代理设置可能导致请求被拦截

（全栈老李小贴士：据统计，移动端用户遇到网络问题的概率是PC端的3倍以上）

实战：用Mock服务模拟异常

下面我用最常用的Mock方案——axios拦截器 + MockJS来演示如何模拟各种异常。

1. 基础Mock服务搭建

// mockServer.js
import Mock from 'mockjs'

// 模拟正常响应
Mock.mock('/api/normal', 'get', {
   
  code: 200,
  data: {
   
    message: '正常响应数据 - 全栈老李出品'
  }
})

// 模拟404
Mock.mock('/api/not-found', 'get', {
   
  code: 404,
  message: '接口不存在 - 全栈老李提醒你检查请求路径'
})

// 模拟500错误
Mock.mock('/api/server-error', 'get', {
   
  code: 500,
  message: '服务器开小差了 - 全栈老李建议你稍后再试'
})

// 模拟超时
Mock.mock