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的一些知識不了解的話，那請自行去深入學習，完善知識框架。