【高频考点精讲】前端Mock方案：如何高效模拟接口数据进行开发？
前端Mock方案：如何高效模拟接口数据进行开发？
🧑🏫 作者：全栈老李
📅 更新时间：2025 年 7 月
🧑💻 适合人群：前端初学者、进阶开发者
🚀 版权：本文由全栈老李原创，转载请注明出处。
今天咱们聊聊前端开发中一个特别实用但又经常被忽视的技能——Mock数据。作为全栈老李，我见过太多前端同学在联调阶段被后端接口拖累，项目进度卡在\"接口还没好\"的尴尬境地。其实只要掌握Mock技术，咱们前端完全可以自己掌控开发节奏！
为什么需要Mock数据？
想象一下这个场景：产品经理刚开完需求评审会，你摩拳擦掌准备开干，结果后端同学告诉你：\"这个接口至少还要两周才能给你\"。这时候你怎么办？干等两周？当然不！Mock数据就是你的救星。
Mock的本质就是在前端模拟后端接口返回的数据，让我们不依赖真实接口也能进行开发。这就像拍电影时用的替身演员，在主角没到场时先把其他镜头拍了。
主流Mock方案对比
1. 硬编码Mock（最原始但有效）
// 全栈老李提示：简单粗暴的Mock方式function mockGetUserInfo() { return { code: 200, data: { id: 1, name: \'全栈老李\', avatar: \'https://example.com/avatar.jpg\' } }}适用场景：快速验证某个功能逻辑，临时解决方案。优点是简单直接，缺点是难以维护，无法模拟网络请求行为。
2. 拦截Ajax请求（进阶方案）
// 使用axios拦截器示例 - 全栈老李出品import axios from \'axios\';axios.interceptors.request.use(config => { if (config.url.includes(\'/api/user\')) { return {
