antdpro 获取数据,触发请求到服务器

route

route页面发送一条dispatch,dispatch 根据设置的type内容,转发到指定的model

componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'listUser/fetch',
    });
  }

model

在model中触发指定的action

import { queryUser } from '../services/api';

export default {
  namespace: 'listUser',

  state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryUser, payload);
      yield put({
        type: 'save',
        payload: response,
      });
    },
  },
};

service

发送请求到/api/listUser这个地址,请求地址在.roadhogrc.mock.js文件中进行配置的

export async function queryUser(params) {
  return request(`/api/listUser?${stringify(params)}`);
}

.roadhogrc.mock.js

在p'roxy里面配置地址

import { getListUser } from './mock/listUser';
'GET /api/listUser': getListUser

mock数据

在目录mock文件下模拟数据

你可能感兴趣的:(antdpro 获取数据,触发请求到服务器)