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文件下模拟数据

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容