和服务端进行交互

Ant Design Pro 是一套基于 React 技术栈的单页面应用，我们提供的是前端代码和本地模拟数据的开发模式，通过 API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。

前端请求流程

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

  • UI 组件交互操作；
  • 调用 model 的 effect；
  • 调用统一管理的 service 请求函数；
  • 使用封装的 request.js 发送请求；
  • 获取服务端返回；
  • 然后调用 reducer 改变 state；
  • 更新 model。
    从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 services 文件夹中，并且一般按照 model 维度进行拆分文件，如：
  1. services/
  2.   user.js
  3.   api.js
  4.   ...

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

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

  1. // services/user.js
  2. import request from '../utils/request';
  4. export async function query() {
  5.   return request('/api/users');
  6. }
  8. export async function queryCurrent() {
  9.   return request('/api/currentUser');
  10. }
  12. // models/user.js
  13. import { queryCurrent } from '../services/user';
  14. ...
  15. effects: {
  16.   *fetch({ payload }, { call, put }) {
  17.     ...
  18.     const response = yield call(queryCurrent);
  19.     ...
  20.   },
  21. }

处理异步请求

在处理复杂的异步请求的时候，很容易让逻辑混乱，陷入嵌套陷阱，所以 Ant Design Pro 的底层基础框架 dva 使用 effect 的方式来管理同步化异步请求：

  1. effects: {
  2.   *fetch({ payload }, { call, put }) {
  3.     yield put({
  4.       type: 'changeLoading',
  5.       payload: true,
  6.     });
  7.     // 异步请求 1
  8.     const response = yield call(queryFakeList, payload);
  9.     yield put({
  10.       type: 'save',
  11.       payload: response,
  12.     });
  13.     // 异步请求 2
  14.     const response2 = yield call(queryFakeList2, payload);
  15.     yield put({
  16.       type: 'save2',
  17.       payload: response2,
  18.     });
  19.     yield put({
  20.       type: 'changeLoading',
  21.       payload: false,
  22.     });
  23.   },
  24. },

通过 generator 和 yield 使得异步调用的逻辑处理跟同步一样，更多可参看 dva async logic。