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,
});
},
},

 

转载于:https://www.cnblogs.com/nhz-M/p/10624984.html