React使用mock模拟数据

使用React开发前端项目，我们可以通过mock来实现数据的自动组装，从而避免前后端开发进度不同步问题，提高项目开发效率。这篇文档存在的意义只用于记录开发过程中遇到的比较容易忘记的问题。

安装

必要依赖，安装mock

$ yarn add mockjs
 

安装网络请求框架，这个随意（测试用），我习惯使用这个

$ yarn add axios
 

写入数据

1. 在src目录下创建mock文件夹用于存放mock数据；
2. 在mock文件下创建一个homedata.js文件，并写入数据：

import Mock from 'mockjs';
 export default Mock.mock('/home','get',{
     success:true,
     data:[
         {
             title: 'Title 1',
         },
         {
             title: 'Title 2',
         },
         {
             title: 'Title 3',
         }
     ]
 })
 

• '/home'为接口地址，省略了base url；
• 'get' 为接口请求方式，与正常接口请求一致
• 第三个参数为接口返回数据，建议格式与真实地址返回一致

关联数据

模拟数据完成后，在app.js里面挂载新建的数据来进行中间件拦截

// mock 数据
 import './mock/homedata.js'
 

组件中展示数据

    constructor(props) {
         super(props)
         this.state = {
             data: []
         }
     }

     componentDidMount() {
         const _this = this;
         axios.get('/home').then(res => {
             console.log(res.data)
             _this.setState({
                 data: res.data.data
             })
         })
     }
 

可以在控制台中看到打印出的数据