UmiJS集成了Mock功能,无需配置即可直接使用,十分方便。Mock接口的配置约定放在工程根目录的mock
文件夹下。
mock
文件下的文件可以任意命名,不过还是推荐按照后端接口的意义来命名。下面例子我们模拟了一个后端接口GET /api/v1/student/:id
,Mock代码中定义了其返回数据。
export default {
"GET /api/v1/student/:id": {
code: 0,
msg: "success",
data: {
studentId: 3,
studentName: "汤姆",
},
},
};
我们可以直接用浏览器访问例如/api/v1/student/1
查看Mock返回的内容。
有时我们实际的后端接口可能具有较长的延时,我们希望前端有一个“加载中”之类的提示,但上面Mock的写法可能返回太快了看不到延时的效果,实际上Mock也可以模拟这种延时逻辑,下面是一个例子。
export default {
"GET /api/v1/student/:id": (req: any, res: any) => {
setTimeout(() => {
res.send({
code: 1,
msg: "success",
data: {
studentId: 3,
studentName: "汤姆",
}
});
}, 2000);
},
};
如果需要关闭Mock,可以添加如下配置:
export default defineConfig({
mock: false,
});
有时是需要我们手动关闭Mock的,比如后端接口已经开发完成了,我们要将Mock接口切换到测试环境接口,此时就可以配置mock: false
将其手动关闭。