前端联调时可用Mock模拟后端未就绪的空数据场景，需按真实接口格式返回空结构（如data:[]、data:null等），并通过拦截器、MSW或组件内临时mock等方式精准控制空响应。
前端联调时遇到后端接口还没 ready，但 JS 需要处理“空数据”场景（比如列表为空、字段为 null 或 undefined、返回空数组 []），可以用 Mock 快速模拟这些情况，不用等后端——关键是让 Mock 返回你想要的“空态结构”，而不是默认的假数据。
用 Mock 工具返回明确的空值结构
别只 mock 一个空对象 {}，要按真实接口响应格式返回空数据。比如后端约定成功响应是 { code: 0, data: [], msg: "" }，那 Mock 就该返回：
-
data: []（空数组）对应列表页无数据 -
data: null或data: undefined模拟字段缺失或后端未赋值 -
data: { list: [], total: 0 }模拟分页接口空结果
在请求层统一拦截并注入 Mock 空响应
以 Axios 为例，在开发环境判断 URL 后直接 resolve 空响应，不发真实请求：
// dev.env.js
if (process.env.NODE_ENV === 'development') {
axios.interceptors.request.use(config => {
if (config.url.includes('/api/user/list')) {
return Promise.resolve({
data: { code: 0, data: [], msg: '' }
});
}
return config;
});
}
这样业务代码完全无感，照常处理 res.data.data，也能触发“空列表”渲染逻辑。
用 MSW（Mock Service Worker）精准控制空响应时机
比拦截器更专业：MSW 可在浏览器端模拟真实 HTTP 响应，包括 status、headers 和 body。模拟空数据示例：
import { rest } from 'msw';
export const handlers = [
rest.get('/api/orders', (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
code: 0,
data: [], // 明确返回空数组
total: 0
})
);
})
];
支持按 query 参数、header 动态返回不同空态，比如 ?status=pending 时返回 data: null，验证组件健壮性。
在组件内临时 mock，快速验证空状态 UI
调试阶段不想动全局配置？直接在组件 useEffect 中 mock 数据：
useEffect(() => {
if (process.env.NODE_ENV === 'development') {
setList([]); // 强制设为空数组
setLoading(false);
return;
}
fetchList();
}, []);
或者用条件注释临时替换 API 调用：
// @ts-ignore
// const res = await api.getUser();
const res = { code: 0, data: null };
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
