Insomnia Mock Server实战3步搭建模拟API让前后端并行开发不再互相等待【免费下载链接】insomniaThe open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage.项目地址: https://gitcode.com/GitHub_Trending/in/insomniaInsomnia 是一款开源、跨平台的 API 客户端支持 REST、GraphQL、gRPC、WebSockets 和 SSE。除了发送请求它内置的Mock Server模拟服务器功能更是开发利器你可以快速搭建模拟 APIMock API定义任意路径、方法、状态码和响应体让前端无需等待后端接口完成就能并行开发。本文将用 3 个步骤带你从零上手 Insomnia Mock Server彻底告别前后端互相等待。为什么需要 Mock Server在传统开发流程中前端往往要等后端接口联调完毕才能开始工作双方都在互相等待痛点Mock Server 解决方案后端接口未开发完成前端先对接模拟数据UI 照常推进后端联调排期紧张双方并行开发只在最终联调时对齐异常场景401/500难复现直接配置状态码和错误响应体接口文档滞后Mock 路由本身就是活文档Mock Server 会监听本地端口默认http://localhost:8080前端把 API 基础地址指向它即可。第 1 步创建 Mock Server在 Insomnia 侧边栏的项目/工作区下拉菜单中选择New Mock Server新建模拟服务器填写名称点击Create。每个 Mock Server 隶属于一个工作区代码层面由 mock-server.ts 中的getOrCreateForParentId保证一个工作区一个 Mock 服务器的唯一性。创建后Insomnia 会自动为它分配本地端口并在 Mock Server 页面展示可访问的 URL。第 2 步配置 Mock 路由核心进入 Mock Server 页面后点击New Mock Route按钮即可添加一条模拟路由这是整个流程的核心路径如/users、/healthcheck方法GET / POST / PUT / DELETE 等不同方法在侧边栏用不同颜色标签区分状态码200、401、500 随意指定响应体直接粘贴 JSON、文本或任意内容响应头可添加自定义 Header路由的增删改由 mock-route.ts 管理界面交互代码位于 mock-server.tsx弹窗表单则实现在 mock-route-modal.tsx。右侧面板会实时显示模拟服务器的请求活动见 mock-response-pane.tsx方便确认前端请求是否命中。一个典型的 Mock 集合长什么样Mock Server 支持导入/导出为 YAML 文件便于团队共享。示例 mock-server.yaml 定义了三条路由url: http://localhost:8080 routes: - name: / method: GET statusCode: 200 body: {message:welcome} - name: /healthcheck method: GET statusCode: 200 body: {uptime:12345678} - name: /unauthorized method: GET statusCode: 401 body: {message:email is required}注意最后一条只需把状态码改为401就能模拟未登录场景前端可以据此开发鉴权失败页面。第 3 步测试并接入前端选中某条 Mock 路由点击Test按钮直接发送测试请求验证状态码与响应体是否符合预期前端项目把 API 基础地址改为 Mock 地址如http://localhost:8080打开 Insomnia 的响应面板即可观察每一条真实请求的入参与匹配情况。自动化的验证流程可参考冒烟测试 mock.test.ts它完整演示了新建 Mock Server → 新建路由 → 重命名 → 测试请求的操作序列。进阶技巧Mock 转请求集合Mock Server 页面提供Generate Request Collection功能见 generate-request-collection.tsx可把已配置的模拟路由一键生成可调用的请求集合方便后续联调模拟异常分支为同一资源准备多条路由如/unauthorized返回 401让前端能覆盖错误处理逻辑团队共享把 Mock 集合导出为 YAML 文件提交给团队新人导入即可开始开发无需口头沟通接口约定☁️配合云存储开启 Insomnia Cloud 同步后Mock Server 随工作区一起同步远程协作时配置不丢失。相关文件速查功能路径Mock Server 数据模型mock-server.tsMock 路由数据模型mock-route.tsMock Server 页面路由mock-server.tsx模拟响应面板mock-response-pane.tsx示例 Mock 集合mock-server.yaml总结Insomnia Mock Server 的搭建流程简单到只需要 3 步创建 Mock Server → 配置 Mock 路由 → 测试并接入前端。它把接口约定从文档变成了可运行的服务让前后端开发真正并行起来。如果你的团队正被联调排期困扰不妨今天就试试这条 Mock 工作流。【免费下载链接】insomniaThe open-source, cross-platform API client for GraphQL, REST, WebSockets, SSE and gRPC. With Cloud, Local and Git storage.项目地址: https://gitcode.com/GitHub_Trending/in/insomnia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考