引子
每个改进都是为了解决问题。
现在我在开发中碰到了问题,我先描述下问题:
我们现在做前后端完全分离的应用,前端写前端的,后端写后端的,他们通过API接口连接。
前端同学心理路程:“后端同学接口写的好慢,我都没法调试了。”
是不是有这个问题呢?一般我们怎么解决?
第一种:自己这边随便造点数据,等后端接口写好了之后,再小修改,再调试。
第二种:想想我们之前获得用户信息的dist/api/user.json,我们可以用这种方式来调试。
但是想象下,我们要模拟一个文章列表,就要手动写几十列。oh~no!
并且,后端接口一般都不带.json,到时候对接,是不是还得改代码?
好了,下面介绍下今天的主角Mock.js。
他会做一件事情:拦截AJAX请求,返回需要的数据!
我们写AJAX请求的时候,正常写,Mock.js会自动拦截的。
1.mock是什么?
官方文档
话不多说直接开始我这里有一个通俗易懂的Demo 小伙伴们可以download 一下通俗易懂的小Demo/Chad97/React-Mock-Demo.git
Start
1. 装包
yarn add mockjs
yarn add axios
这个是测试用 你也可以使用ajax、fetch 等
2. 在src 目录下创建我们的mock 文件夹用于存放我们的mock数据
3.写入mock数据
创建一个data2.js
内容如下// 使用 Mockimport Mock from 'mockjs'export default Mock.mock('/postdata1','post',{success: true,message: '@cparagraph',// 属性 list 的值是一个数组,其中含有 1 到 5 个元素'list|1-5': [{// 属性 sid 是一个自增数,起始值为 1,每次增 1'sid|+1': 1,// 属性 userId 是一个5位的随机码'userId|5': '',}]})
4. 关联Mock
模拟数据完成后,我们得在app.js里面挂载我们的数据来进行中间件拦截import React from 'react';import Mock from './components/Mock'//挂载 Mockimport './mock/data1.js'import './mock/data2.js'
5. attempt
现在我们写一个组件来展示我们的数据import React from 'react';import axios from 'axios'class Mock extends ponent {constructor(props) {super(props);this.state = {gData: null,pData: null};}getDate1 = () =>{axios.get('/getdata1', {params:{id : '123'}}).then((res)=>{console.log(res.data)this.setState({gData: res.data.message})}).catch((err)=>{console.log(err)})}getDate2 = () => {axios.post('/postdata1', {params: {name: 'jack'}}).then((res)=>{console.log(res.data)this.setState({pData: res.data.message})}).catch((err)=>{console.log(err)})}render() {return (<React.Fragment><h3>数据展示</h3><p>get:{this.state.gData == null ? '无' : this.state.gData }</p><p>post: {this.state.pData == null ? '无' : this.state.pData } </p><button onClick={this.getDate1}>点击获取(Get)Mock数据</button><br /><br /><button onClick={this.getDate2 } >点击获取(Post)Mock数据</button></React.Fragment>);}}export default Mock;