Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞
在前后端约定好 API 接口以后,前端可以使用 Mock 数据来在本地模拟出 API 应该要返回的数据,这样一来前后端开发就可以同时进行,不会因为后端 API 还在开发而导致前端的工作被阻塞
注意:一般在开发阶段使用,当我们项目上线时,一定要关闭Mock
mock使用场景
mock:假的
前端程序员提到的mock数据的含义是:真的假数据
真的:符合接口规范要求的。
假数据:数据是人为创建出来的,不是真正的业务数据。
什么时候需要mock?
后端接口的开发速度跟不上前端的进度, 而前端要实现业务还必须依赖数据,前端为了保证开发进度就需要自己mock数据 ,保证业务能正常开发
自己模拟数据
在mock下创建一个api.ts文件
export default{
"GET /api/list":{
name:"张三",
age:28,
love:"睡觉"
}
}
发送网络请求,这里我用的是umi内置的request
import { useEffect } from 'react';
import { request } from 'umi';
import './index.less';
export default function IndexPage() {
const getLIist=()=>{
request('/api/list').then(res=>{
console.log(res);
})
}
useEffect(()=>{
getLIist()
},[])
return (
<div className='index'>
<h1 className='title'>Page index</h1>
</div>
);
}
最后在控制台可以看到数据成功获取了
我们在mock中定义的数据可以在浏览器进行查看