js用mock模拟请求超时的核心是人为延迟响应以触发客户端timeout机制，需配合msw、axios-mock-adapter或fetch拦截实现延迟返回，并确保客户端配置了timeout选项，最终捕获对应超时错误类型。
前端网络异常时，JS 用 Mock 模拟请求超时错误，核心是**在请求发出后人为延迟响应，并在超时时间到达前不返回结果，触发客户端的 timeout 机制**。关键是让 Mock 工具（如 Mock.js、msw、axios-mock-adapter 或原生 fetch 拦截）主动“卡住”响应，而不是立即返回失败。
使用 Mock Service Worker（MSW）模拟超时
MSW 是当前主流方案，支持精准控制响应时机：
- 在 handler 中用 setTimeout 延迟调用
ctx.delay()或直接不 resolve，但更推荐用ctx.delay(Number.MAX_SAFE_INTEGER)实现“无限延迟” - 确保客户端请求设置了 timeout 配置（如 axios 的
timeout: 3000，或 fetch 的AbortSignal.timeout(3000)），否则不会触发超时错误 - 示例代码：
import { rest } from 'msw' rest.get('/api/user', (req, res, ctx) => { // 模拟超时：延迟远超客户端 timeout（如设为 10s，客户端 timeout 是 3s） return res(ctx.delay(10000)) })
用 axios-mock-adapter 模拟超时
适用于 axios 项目，通过延迟响应触发内置 timeout：
- 调用
mock.onGet(...).reply(() => new Promise(() => {}))可阻塞响应，但更稳妥的是用delayResponse - 必须保证 axios 实例已配置
timeout，例如：axios.create({ timeout: 3000 }) - 示例：
mock.onGet('/api/user').reply(() => new Promise(resolve => { setTimeout(() => resolve([200, { id: 1 }]), 5000) // 5s 后才响应，超过 3s timeout 就报错 }) )
原生 fetch + AbortController 搭配 Mock
若用原生 fetch，Mock 需配合 AbortSignal 判断是否已中止：
- 拦截 fetch 后，检查
req.signal.aborted，若已中止就直接 throw Error 或返回空响应 - 更简单的方式：在 mock 响应中 不监听 signal，仅用
setTimeout延迟 resolve，让客户端 abort 逻辑自行触发 error - 注意：fetch 本身不原生支持 timeout，需手动封装，例如：
const timeoutFetch = (url, options = {}) => { const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), options.timeout || 3000) return fetch(url, { ...options, signal: controller.signal }) .finally(() => clearTimeout(timeoutId)) }
验证超时行为是否生效
模拟之后，务必在业务代码中确认能捕获到正确的错误类型：
- axios 超时错误：检查
error.code === 'ECONNABORTED'或error.message.includes('timeout') - fetch 超时错误：捕获到的 error 是
DOMException，error.name === 'AbortError' - 不要只依赖 status !== 200 来判断失败——超时根本没有状态码，必须显式处理 abort/timeout 场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
