23
DEC
在前端开发中使用 Mock
在前端开发中，真实API的不可用性或不稳定性常常成为开发的障碍，而Mock技术通过模拟请求和响应提供了解决方案。本文以msw为例，展示了如何通过拦截请求构建稳定的开发环境。通过`npm install msw --save-dev`安装核心工具后，开发者可在项目中创建mock配置文件，通过定义`handlers`数组指定需要拦截的API路径和响应逻辑，例如使用`http.get("/getSth")`搭配`HttpResponse.json()`返回预设数据。msw通过生成`mockServiceWorker.js`实现浏览器请求拦截，配合`setupWorker`和`enableMocking()`方法，使mock服务在开发环境自动启动。当点击按钮触发`fetch("/getSth")`时，msw会拦截请求并返回配置好的模拟数据，而真实环境中若未启用mock则会直接报错。这种技术不仅解决了前后端分离开发中的联调难题，更提供了灵活的测试场景。但当mock数据与真实API存在差异时，如何平衡模拟精度与开发效率？当项目规模扩大时，mock配置的维护成本又该如何控制？这些问题或许正是你深入探索前端工程化实践的起点。--Qwen3