React实现数据模拟请求(mock+modal+page+util)

首先写一个根目录下创建一个uitl/request.js,用于发送请求

request.js

// import fetch from 'dva/fetch';
function checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
        return response;
    }

    const error = new Error(response.statusText);
    error.response = response;
    throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default async function request(url, options) {
    const response = await fetch(url, options);
    checkStatus(response);
    return await response.json();
}

在page层创建event.js用于页面的展示

event.js

import React, { Component } from 'react';
import { connect } from 'dva';

// 加namespace是确定唯一的空间
const namespace = "EventList";
// @connect(setToProps) 可以通过=> 方式回调，也可以使用写函数的方式回调

// 通过dva中的connect获取获取到model中的数据
@connect(
  // 说明：第一个回调函数，作用：将page层和model层进行链接，返回model中的数据
  // 并且，将返回的数据，绑定到this.props
  (state) => {
    // 这里用return就是将数据绑定到props上，后面使用的时候就this.props.param
    return{ // 需要注意这里的括号是{}
      data: state[namespace].data,
      maxNum: state[namespace].maxNum
    }
  },

  (dispatch) => {
    // 第二个参数 的作用： 将定义的参数绑定到this.props中，调用model层中定义的函数
    // return 中可以写入多个函数
    return{ // 将返回的函数绑定到this.props中
      addNum: function(){
        dispatch({
          // 这里的addNewData对应model中的一个方法
          type: namespace + "/addNewData"
        })
      },
      //  用于初始化数据
      initData: ()=> {
        dispatch({
          // 这里的addNewData对应model中的一个方法
          type: namespace + "/initData"
        })
      }
    }
  }
)
class Event extends Component {
  componentDidMount(){
    this.props.initData();
  }

  // 这个方法在dispatch中定义， 修改了数据
  add =()=> {
    // 这个方法在dispatch中定义， 修改了数据
    this.props.addNum()
  }
  render() {
    return (
      <div>
          <ul>
            {
              this.props.data.map(
                (value, index) => {
                  return <li key={index}>{value}</li>
                }
              )
              // this.props.eventList.map((value, index) => <li key={index}>{value}</li>)
            }
          </ul>
          {/* page层修改model中的数据，通过睚model中的reduce修改 */}
          {/* 在@connect中传入的第二个参数来修改model中的数据 */}
          <button onClick={this.add} >clickMeAdd</button>
      </div>
    );
  }
}

export default Event;

在modal创建eventData.js用于数据的交互,这里需要引入之前的request

eventData.js

// ant Design 有自带的service/api, 这是自己写的request, 复用自带的，仿照例子写
import request from '../../../myutil/request';

export default { 
    // 命名空间，根据唯一的名字找到对应的数据
    namespace: 'EventList', 
    state: { 
        data: []
    },
    reducers : { // 定义一些函数
        addNewData: function(state, result){ // 这里的state是更新之前的状态数据, 是state中存在的数据

            if(result.data){ //如果state中存在data数据，直接返回，在做初始化的操作
                return result.data;
            }

            let maxNum = state.maxNum + 1;
            // ... 是react中的解构表达式， 表示将this.state.datalist展开， 然后加止maxNum，组成新的数组
            let newArr = [...state.data, maxNum]
         
            // 重新进行渲染，这里state中的数据更新后，页面会重新的渲染
            // 现在这种情况不能通过Setstate来作更新， 通过return来更新
            // this.setState({
            //     dataList: newArr,
            //     maxNum: maxnum
            // });

            // 通过return 返回更新后的数据
            return {
                data: newArr,
                maxNum: maxNum
            }
        }
    },

    effects: { //新增effects配置，用于异步加载数据
        // 有*号，则可以做异步的操作
        *initData(params, sagaEffects) { //定义异步方法
            const {call, put} = sagaEffects; //获取到call、put方法
            const url = "/ds/list"; // 定义请求的url

            // 这里使用到request， 则需要导包
            // 这里yield用于做异步请求
            let data = yield call(request, url); //执行请求

            yield put({ // 调用reducers中的方法
                type : "addNewData", //指定方法名
                data : data //传递ajax回来的数据
            });
        }
    }
}

在mock目录下新建events.js用于存储相关数据，这个是前后端分离的时候用于数据的模拟

event.js

// 代码中会兼容本地 service mock 以及部署站点的静态数据
export default {
    // 支持值为 Object 和 Array
    'GET /ds/list': (req, res) => {
        res.json({
            data: [1], 
            maxNum: 1
        });
    }
};

测试如下