antd pro中如何使用mock数据，以及与服务端进行交互

Posted 2021-04-24 前端小T

使用mock数据进行开发之前，我们需要对antd pro有一定的了解，antd pro的底层基础框架dva是使用effect的方式来管理同步化异步的

使用mock数据主要包括以下几步：

1、添加mock接口

2、添加service文件

3、添加model(需引入service函数)

4、页面连接model

5、页面调用model中的effect函数

6、model中的effects通过reducer中的函数将数据返回到页面

7、页面通过this.props获取数据

具体操作就是在项目根目录下，mock文件夹中新建record.js文件，存放mock数据

export default {  'GET /love/record':{     message: 'Succeed',     code:0,     data: [ { key: '1', Name: '违规操作', age: '口腔科', address: '人民医院', tags: '2019-03-21 12:56:12', questions: '温度' }, { key: '2', Name: '违规操作', age: '皮肤科', address: '人民医院', tags: '2019-03-21 12:56:12', questions: '压力' },     ]  }}

然后在src目录的services文件夹中新建一个record.js文件，用来创建请求数据的函数，框架已经为我们封装好了request函数，我们可以直接进行引入

import request from '../utils/request' ;export async function getRecord (payload) { return request('/love/record',{  //如果路径中有参数，需要用字符串模板进行拼接``     method: 'GET' }) .then(res => { return res; } .catch(err => console.log(err))}

src目录下的models文件夹是store文件夹，用来定义state

新建record.js

引入我们在services文件夹中创建的请求数据的函数

import { getRecord } from '../services/record' ;export default { namespace: 'demo',  state:{    record: [], },effects: { *getRecord(payload,{call,put}) { const res = yield call(getRecord,payload) yield put({ type: 'updateToView',      payload:{record:res.data} }); }},reducers: { updateToView(state, { payload }) { return { ...state, ...payload, } }}}

最后在我们的page页面中,通过this.props就可以得到我们想要的。

import { connect } from 'dva' ;@connect(state=> ({  demo:state.demo})componentDidMount(){ const { dispatch } = this.props; dispatch({ //需要调用effects中的该函数     type: 'record/getRecord',   })}console.log(this.props)就可以得到结果const { demo } = this.props