mock service worker（msw）是前端模拟网络异常的推荐方案，通过ctx.networkerror()在service worker层真实触发typeerror: failed to fetch；若未用msw，可用axios拦截器配合promise.reject(new error('network error'))模拟断网。
前端开发中，网络异常（如请求超时、连接中断、500/503 错误）很难靠真实后端复现。用 Mock 模拟网络中断，核心是拦截请求并主动触发失败逻辑，而不是只返回假数据。
用 Mock Service Worker（MSW）模拟断网
MSW 是目前最推荐的方案，它在 Service Worker 层拦截请求，能真实模拟网络层失败（比如 TypeError: Failed to fetch），而非仅返回 500 响应。
- 安装依赖：
npm install msw --save-dev - 创建 mock handlers，对目标接口返回
ctx.networkError()：
import { rest } from 'msw'<br><br>export const handlers = [<br> rest.get('/api/user', (req, res, ctx) => {<br> // 模拟网络中断：不发响应，直接抛出网络错误<br> return ctx.networkError('Failed to fetch')<br> })<br>]
这样前端 fetch 或 axios 会收到原生 TypeError，和真实断网行为一致，可验证重试、离线提示、loading 状态终止等逻辑。
用 axios 拦截器 + 自定义错误模拟中断
若暂未接入 MSW，可在 axios 请求拦截器中按条件“伪造”网络失败：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 添加全局请求拦截器，检查是否开启“断网模式”
- 匹配特定 URL 或随机概率，直接
Promise.reject(new Error('Network Error')) - 注意：这不会触发原生
TypeError: Failed to fetch，但能覆盖大部分业务错误处理分支
axios.interceptors.request.use(config => {<br> if (window.__MOCK_NETWORK_OFFLINE__ && config.url.includes('/api/')) {<br> return Promise.reject(new Error('Network Error'))<br> }<br> return config<br>
用 Chrome DevTools 强制模拟离线（辅助测试）
这不是 JS Mock，但非常实用：
- 打开 DevTools → Network 面板 → 勾选 “Offline”
- 所有请求立即失败，触发真实的
fetch/XMLHttpRequest网络错误 - 适合快速验证 UI 层容错（如“网络已断开”提示）、Service Worker 缓存逻辑
- 缺点：无法精确控制哪个接口断、何时断，适合手动测试，不适合自动化
关键提醒：别只 mock HTTP 状态码
很多开发者只 mock 503 Service Unavailable，但这属于服务端响应，不是网络中断。真实断网表现为：
- fetch 抛出
TypeError: Failed to fetch - axios 抛出
Error: Network Error（底层 xhr/fetch 失败） - 没有响应体、没有 status、没有 headers
务必区分「服务不可用」和「网络不可达」，Mock 方案要匹配对应错误类型，才能测出健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
