what DVA？
Dva是基于Redux做了一层封装，对于React的state管理，有很多方案，我选择了轻量、简单的Dva。
dva 可以很方便就使用mock.js进行数据的模拟。
只需要三步，即可使用mock进行模拟数据，使用fetch进行数据的请求。
首先，我们使用dva初始化一个项目。目录的结构为:
上面画着两个mock的相关配置文件。
第一步，我们现在在mock的文件夹下面配置你需要配置的文件，
例如说，你需要模拟用户列表的数据，那么你就配置是一个user.js , 里面写相关的mock模拟数据的语法就行了。
抛个例子(我这个模板可以直接用了，自行改增删改查吧):
'use strict';
const qs = require('qs');
const mockjs = require('mockjs'); //导入mock.js的模块
const Random = mockjs.Random; //导入mock.js的随机数
// 数据持久化 保存在global的全局变量中
let tableListData = {};
if (!global.tableListData) {
const data = mockjs.mock({
'data|100': [{
'id|+1': 1,
'name': () => {
return Random.cname();
},
'mobile': /1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\d{8}/,
'avatar': () => {
return Random.image('125x125');
},
'status|1-2': 1,
'email': () => {
return Random.email('visiondk.com');
},
'isadmin|0-1': 1,
'created_at': () => {
return Random.datetime('yyyy-MM-dd HH:mm:ss');
},
'updated_at': () => {
return Random.datetime('yyyy-MM-dd HH:mm:ss');
},
}],
page: {
total: 100,
current: 1,
},
});
tableListData = data;
global.tableListData = tableListData;
} else {
tableListData = global.tableListData;
}
module.exports = {
//post请求 /api/users/ 是拦截的地址 方法内部接受 request response对象
'GET /users' (req, res) {
const page = qs.parse(req.query);
const pageSize = page.pageSize || 10;
const currentPage = page.page || 1;
let data;
let newPage;
let newData = tableListData.data.concat();
//数据开始模拟
if (page.field) {
const d = newData.filter((item) => {
return item[page.filed].indexOf(page.keyword) > -1;
});
data = d.slice((currentPage - 1) * pageSize, currentPage * pageSize);
newPage = {
current: currentPage * 1,
total: d.length,
};
} else {
data = tableListData.data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
tableListData.page.current = currentPage * 1;
newPage = {
current: tableListData.page.current,
total: tableListData.page.total,
}
}
setTimeout(() => {
res.json({ //将请求json格式返回
success: true,
data,
page: '123',
});
}, 200);
},
第二步，在 .roadhogrc.mock.js 中进行导入，以便于在dva进行加载的时候能够读到 mock 数据模拟的相关配置文件
//加载mock的数据 通过循环把在 mock 文件夹下的所有配置文件都拿到，并最后export出去
const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
Object.assign(mock, require('./mock/' + file))
})
module.exports = mock
第三步,就是调试了。如果是在component中发送请求，那么需要以下的步骤:
import fetch from 'dva/fetch'; //导入fetch的模块
fetch('/users',{ // 发送请求
method:'GET', //请求方式 (可以自己添加header的参数)
mode:'cors',// 避免cors攻击
credentials: 'include'
}).then(function(response) {
//打印返回的json数据
response.json().then(function(data){ //将response进行json格式化
console.log(data); //打印
});
}).catch(function(e) {
console.log("Oops, error");
});
我的例子只是把核心的代码贴出来而已。实际的项目运用中，我们可以在components的初始化，或者动作事件中进行fetch的异步请求的动作。如果对fetch的一些知识不了解的话，那请自行去深入学习，完善知识框架。