背景
前后端分离的协作模式下,前后端之间的数据传输都是基于 HTTP 接口实现。显然前端的开发是依赖后端接口实现的。在讲求快速迭代的互联网公司这种串行的等待肯定是不会出现的。前后端约定好接口的出参和入参之后,前端数据模拟(mock)就很有必要了。前端基于接口文档自己模拟一份假数据作为前端的数据源。后端按照约定的文档实现接口功能。待接口完全实现之后,前后端切换到真实的接口进行联调。显然,mock 对于开发效率的提升是非常重要的。
1 mock 的几种方式
mock 有很多的方式,我们可以根据团队的情况、项目的复杂度、人员的能力综合评估选择适合自己团队的方式。
1.1 前端代码中写死数据
这种方式是最简单的一种 mock 方式,前端通常会将请求某个接口的动作封装到一个方法中,调用的时候直接返回前端在本地写死的数据。
async function getData (){
// 开发阶段不走接口直接返回本地mock数据。
return await new Promise(function(resolve){
setTimeout(()=>{
resolve({code:0, message: 'success', data: {})
}, 200)
})
// 真实的请求
return await axios.get('/api/getUserInfo');
}
这种方式最大的有点就是简单