ant design pro 和服务端进行交互

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1. UI 组件交互操作；
2. 调用 model 的 effect；
3. 调用统一管理的 service 请求函数；
4. 使用封装的 request.js 发送请求；
5. 获取服务端返回；
6. 然后调用 reducer 改变 state；
7. 更新 model。

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 services 文件夹中，并且一般按照 model 维度进行拆分文件

其中，utils/request.js 是基于 fetch 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。

例如在 一个请求用户信息的例子中：

// services/user.js
import request from '../utils/request';

export async function query() {
  return request('/api/users');
}

export async function queryCurrent() {
  return request('/api/currentUser');
}

// models/user.js
import { queryCurrent } from '../services/user';
...
effects: {
  *fetch(_, { call, put }) {
    const response = yield call(queryUsers);
    yield put({
      type: 'save',
      payload: response,
    });
  },
  *insertUser({ payload, callback }, { call }) {
    const response = yield call(insertUser, payload);
    if (callback && typeof callback === 'function') {
      callback(response); // 返回结果
    }
   },
}
reducers: {
  save(state, action) {
    return {
      ...state,
      list: action.payload,
    };
  },
}

// views.js
const { dispatch} = this.props;
dispatch({
   type: 'user/fetch'
});
dispatch({
  type: 'user/insertUser',
  payload: target,
  callback: res => {
    if (res) {
      data[0].id = res.id;
      onChange(data); // 请求完成后返回的结果
    }
   },
});

可以看到，我们在services中统一定义了请求request的函数，然后在model中导入service中的函数，通过fetch进行具体的封装，然后根据具体场景进行处理

通过payload传入参数，通过callback指定回调函数，通过call调用service中的异步函数，通过put将response传入reducers进行数据处理保存等操作。