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 維度進行拆分文件

services/
  user.js
  api.js
  ...

其中，utils/request.js 是基於 fetch 的封裝，便於統一處理 POST，GET 等請求參數，請求頭，以及錯誤提示信息等。具體能夠參看 request.js。

例如在 services 中的一個請求用戶信息的例子：

// 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({ payload }, { call, put }) {
    ...
    const response = yield call(queryCurrent);
    ...
  },
}

處理異步請求

在處理複雜的異步請求的時候，很容易讓邏輯混亂，陷入嵌套陷阱，因此 Ant Design Pro 的底層基礎框架 dva 使用 effect 的方式來管理同步化異步請求：

effects: {
  *fetch({ payload }, { call, put }) {
    yield put({
      type: 'changeLoading',
      payload: true,
    });
    // 異步請求 1
    const response = yield call(queryFakeList, payload);
    yield put({
      type: 'save',
      payload: response,
    });
    // 異步請求 2
    const response2 = yield call(queryFakeList2, payload);
    yield put({
      type: 'save2',
      payload: response2,
    });
    yield put({
      type: 'changeLoading',
      payload: false,
    });
  },
},