react & dva 全新的WEB应用数据解决方案(二)

发表于   |   分类于   |  

文章前言

上一篇文章中，已经说了很多，这篇文章中，我们将主要针对实际的业务场景，去理解和做一些有意义事。主要的目的就是利用这种新的开发模式，在以后的实际开发中，少踩坑。OK，Here we go…….

发起请求

找到 /services/ 文件夹，新建 users.js 文件， 然后引入 request.js 文件，开始写函数，以后所有的请求都在这里发起，当然只是针对当前业务页面的请求，面对不同类型的业务，我们可以创建不同的 js 脚本文件去处理相应的请求。具体代码如下：

1
2
3
4
5
6
import request from '../utils/request';
import qs from 'qs';
export async function query(params) {
  return request(`/api/users?${qs.stringify(params)}`);
}

以上的代码中我们发起了一个异步的请求，下面我们要为这个请求的URL地址做一些工作了，找到 mock 文件夹，在下面创建一个users.js提供接口用于生产我们的数据，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
'use strict';
const qs = require('qs');
const mockjs = require('mockjs');
module.exports = {
  'GET /api/users': function (req, res) {
    const page = qs.parse(res.query);
    const data = mockjs.mock({
      'data|100': [{
        'id|+1': 1,
        name: '@cname',
        'age|11-99': 1,
        address: '@region'
      }],
      page: {
        total: 100,
        current: 1
      }
    });
    setTimeout(function () {
      res.json({
        success: true,
        data,
        page: {
          current: 1,
          total: 100,
        }
      });
    }, 500);
  },
};

上面的代码中，引入了一个叫做 mockjs 模块去生产数据，大大简化了手动构建数据步骤，也省了很多麻烦！推荐使用。更多详情请前往mockjs传送门; OK，至此接口也有了，数据也有了。少年去玩吧！！！

结语

在实际项目，也是一边学习react，一边用，很多东西都是在实际项目中。不断踩坑得到的，但是毋庸置疑，react是一种潮流，它值得你去一试。 这次为什么要做这个笔记呢？ 主要是因为之前做项目所有的数据都是自己动手组织的，到后面会发现，随着项目变大，功能越多，数据结构复杂，数据越发的难以维护了。所以想尝试去理解 redux 这种数据管理方法。于是做了这么两篇东西。如果有错误，请多多指教。大家共同进步嘛！ 本次教程是参考这个教程 写的。如果还不懂，那就移步前者，他写的更加完美。

Fork me on GitHub