Umi请求Mock中的数据

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中定义的数据可以在浏览器进行查看