Ant Design Pro 中的服务端交互

Posted nhz-m

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,
    });
  },
},

 

以上是关于Ant Design Pro 中的服务端交互的主要内容,如果未能解决你的问题,请参考以下文章

ant design pro advanced Mock 和联调

011-ant design pro advanced Mock 和联调

ant design pro对接SSO单点登录

015-ant design pro advanced 使用 API 文档工具

一次有趣的ant-design与后端数据交互的使用

Ant Design Pro 文件上传(JavaScript版)