antd pro中如何使用mock数据以及调用接口
antd pro的底层基础框架使用的是dva，dva采用effect的方式来管理同步化异步
在dva中主要分为3层 services models components
models层用于存放数据以及对数据进行操作，services层调用请求后台接口的方法，components层用于书写页面逻辑代码
services层
import request from '@/utils/request';
export async function doit(payload) {
const {id} = payload;
let url = `/api/v2/.../${id}`;
return request(url,{
mode: 'cors',
method: 'GET',
})
.then(res => {
return res;
})
.catch(err => console.log(err));
}
models层中的effects是与后台交互、处理数据逻辑的地方
import {doit} from '../../'
export default {
namespace: 'test',
effects: {
*fetchNum ({payload,callback},{call,put}) {
const res = yield call (doit,payload)
//doit是引入services层那个js文件的doit方法，payload是后台要求传递的参数，res就是后台返过来的数据
yield put ({
type: 'addNum', //这就是reducer的addNum方法，put用来出发reducer中的方法，payload是传过去的参数。同时也能触发同等级effects中的方法
payload: {
num: res.data //把后台返回的数据赋值给num,假如哪个reducer中的方法是由这里effects去触发的，哪个num名必须是这里的名字num，如果reducer中的方法不是这触发，那名字可以随意取
}
})
}
}
reducers: {
addNum (state,{payload:{num}}) {
return {...state,num}
}
}
}
components层
页面如果需要使用models层的数据，要用connect进行连接,即在页面在引入import {connect} from 'dva';@connect(state => ({test:state.test})) 通过this.props获取数据
this.props.dispatch({
type: 'test/fetchNum', test对应models层的命名空间namespace
payload: {
numCount: ++1
}
})
使用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函数（可能需要我们对request.js文件进行补充），我们可以直接进行使用
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({
//需要调用对于namespace下effects中的该函数
type: 'record/getRecord',
})
}
console.log(this.props)就可以得到结果
const { demo } = this.props
我的request.js文件
import fetch from 'dva/fetch';
import { message } from 'antd';
import { error } from '@/utils/error';
const checkStatus = response => {
if (response.status >= 200 && response.status < 300) {
return response;
}
const errortext = error[response.status] || response.statusText;
let isLogin = response.url.search('/unsecure/login') != -1;
if (response.status === 401) {
if (isLogin) {
message.error(`请求错误 ${response.status}: ${errortext}`);
} else {
console.log('gogogo')
router.push('/user/login');
}
} else {
if (!isLogin) {
message.error(`请求错误 ${response.status}: ${errortext}`);
}
}
return response;
};
export default function request(url, option) {
//获取token
let token = localStorage.getItem('token');
const options = {
...option,
headers: {
'X-Authorization': token,
'x-language': 'chinese',
},
};
const newOptions = { ...options, credentials: 'include' };
if (
newOptions.method === 'POST' ||
newOptions.method === 'PUT' ||
newOptions.method === 'DELETE'
) {
if (!(newOptions.body instanceof FormData)) {
newOptions.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...newOptions.headers,
};
if (newOptions.dataType != 'string') {
newOptions.body = JSON.stringify(newOptions.body);
}
} else {
newOptions.headers = {
Accept: 'application/json',
...newOptions.headers,
};
}
}
return (
fetch(url, newOptions)
.then(checkStatus)
.then(response => {
if (newOptions.responseType === 'blob') {
return response.blob();
}
let type = typeof response;
switch (type) {
case 'object':
return response.json();
case 'string':
return response.text();
}
return response.json();
})
.then(res => {
return res;
})
.catch(e => { })
);
}
error.js文件
export default {
40101: '再输错两次将锁住'，
40200: '用户不存在',
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户权限错误。',
403: '权限信息错误。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维保。',
504: '网关超时。',
}
