dva框架使用mock.js模拟数据 + fetch请求数据

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的一些知识不了解的话，那请自行去深入学习，完善知识框架。