标签：port col import request evel 交互 als ons 调用
在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：
UI 组件交互操作；
调用 model 的 effect；
调用统一管理的 service 请求函数；
使用封装的 request.js 发送请求；
获取服务端返回；
然后调用 reducer 改变 state；
更新 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, }); }, },
标签：port col import request evel 交互 als ons 调用
原文地址：https://www.cnblogs.com/nhz-M/p/10624984.html
