无需登录 数据私有 本地保存

Fetch模拟API - 截获请求返回假数据

12
0
0
0

Fetch 模拟API

已停止
拦截次数
0
活跃规则
0
总规则数
0
日志条数
0
规则列表
暂无规则，点击"添加"创建
请从左侧选择规则，或点击"添加"创建新规则
响应结果
点击"发送请求"查看响应...
请求拦截记录
暂无拦截日志
常见问题与知识

Fetch API是现代浏览器内置的HTTP请求接口，基于Promise设计，语法更简洁、支持async/await，原生支持Stream、Request/Response对象。相比XMLHttpRequest，Fetch的代码更易读、链式调用更优雅，但不能直接监听上传进度，且默认不携带Cookie（需设置credentials）。Fetch已成为前端开发的主流HTTP请求方式。

API Mock（模拟API）是在前端开发中，用假数据代替真实后端接口的技术。主要优势：前后端并行开发——后端接口未就绪时前端可独立工作；快速原型验证——无需等待后端即可演示功能；测试场景覆盖——轻松模拟错误响应、超时、边界数据等；离线开发——无需网络即可调试。成熟的Mock方案包括MSW (Mock Service Worker)、JSON Server、Mock.js等。

通配符匹配：使用 * 匹配任意字符序列。例如 */api/users/* 可匹配 /api/users/123、/v1/api/users/list 等。
正则匹配：以 / 开头和结尾的模式自动识别为正则表达式。例如 /\/api\/user\/\d+/ 匹配 /api/user/123。
精确包含匹配：不含通配符的模式会进行子串匹配，URL中包含该模式即匹配成功。

不会。当拦截规则匹配成功且总开关开启时，请求会被完全拦截在浏览器端，不会发送到网络。工具会直接构造一个Response对象返回给调用者。只有不匹配任何规则（或总开关关闭）的请求才会通过原始fetch正常发送。你可以在"拦截日志"面板中查看每条请求是否被拦截。

在规则编辑中设置"延迟(毫秒)"字段可模拟网络延迟（0-30000ms），帮助测试加载状态和超时处理。"状态码"下拉框支持常见的HTTP状态码（200/201/400/401/403/404/500等），可模拟各种服务端响应场景，验证错误处理逻辑是否正确。

规则和日志会自动保存到浏览器的localStorage中，刷新页面或关闭浏览器后重新打开，数据依然保留。点击"重置规则"按钮可恢复预设示例规则。清除浏览器数据会导致保存的规则丢失，建议导出重要规则配置。

MSW使用Service Worker在网络层拦截，拦截级别更低，可拦截所有类型的请求（包括图片、CSS等），不修改window.fetch。本工具通过重写window.fetch实现拦截，仅拦截fetch请求，但更轻量、无需注册Service Worker、配置更简便。本工具适用于快速调试和原型开发，MSW更适合大型项目的集成测试。

这正是本工具的核心优势——无需修改任何业务代码。只需在工具中配置匹配规则并开启拦截，业务代码中的fetch调用会自动被拦截并返回mock数据。调试完成后关闭拦截开关，一切恢复正常。这意味着你可以在开发环境自由切换mock/真实模式，无需反复注释代码或修改配置。
🔧 相关工具