一、概述

  原文地址:https://pro.ant.design/docs/server-cn

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

二、详细介绍

2.1、前端请求流程

在 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

// models/user.js
import { queryCurrent } from '../services/user';
...
effects: {
*fetch({ payload }, { call, put }) {
...
const response = yield call(queryUsers);
...
},
}

2.2、Effect 处理异步请求

在处理复杂的异步请求的时候,很容易让逻辑混乱,陷入嵌套陷阱,所以 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,
});
},
},

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

2.3、从 mock 直接切换到服务端请求

通常来讲只要 mock 的接口和真实的服务端接口保持一致,那么只需要重定向 mock 到对应的服务端接口即可。

// .roadhogrc.mock.js
export default {
'GET /api/(.*)': 'https://your.server.com/api/',
};

这样你浏览器里这样的接口 http://localhost:8001/api/applications 会被反向代理到 https://your.server.com/api/applications 下。

2.3.1、关闭 mock

关闭 mock 的方法我们推荐采用环境变量,你可以在 package.json 中设置:

"script" : {
"start": "roadhog server",
"start:no-proxy": "cross-env NO_PROXY=true roadhog server"
}

然后在 .roadhogrc.mock.js 中做个判断即可:

const noProxy = process.env.NO_PROXY === 'true';
...
export default noProxy ? {} : delay(proxy, 1000);

.

ant design pro (七)和服务端进行交互的更多相关文章

  1. Ant Design Pro 改变默认启动端口号

    找到package.json文件,找到图位置加--port即可.

  2. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  3. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

  4. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

  5. ant design pro (八)构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

  6. 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)

    前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...

  7. 轻松玩转Ant Design Pro一

    ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的, ...

  8. ant design pro超详细入门教程

    1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...

  9. ant design pro (十二)advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

随机推荐

  1. 【20181026T1】**手枪【dfs】

    题面 [错解] 百年难得一见之提高考搜索了 ...怎么搞啊 相当于是S进去有一个环? tarjan? 跑个联通块,可以穿过去的连一条边? 好主意-- dfs写完了-- 哎等下? 5 5 .##.. # ...

  2. python实现图片验证码

    1 验证基础知识1.1 Python生成随机验证码,需要使用PIL模块. # 安装 pip3 install pillow 1.2 创建图片 from PIL import Image img = I ...

  3. 是否排序好了 Exercise07_19

    import java.util.Scanner; import java.util.Arrays; /** * @author 冰樱梦 * 时间2018年12月 * 题目:是否排序好了 * */ p ...

  4. bzoj1123 Blockade

    Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n&l ...

  5. iOS防止button重复点击

    项目中常会遇到在按钮的点击事件中去执行一些耗时操作.如果处理不当经常会出现连续多次点击push多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...

  6. HDU 4679 Terrorist’s destroy (2013多校8 1004题 树形DP)

    Terrorist’s destroy Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Othe ...

  7. Internationalization composition diagram

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHJvdWJsZXNob290ZXI=/font/5a6L5L2T/fontsize/400/fill/I0 ...

  8. Java Http 设置代理

    1.今天在Eclipse下面编译一个Http客户端时,发现可以连接局域网,连接不上外部网络,突然想起所用PC是通过代理访问网络的,设置代理后程序可以正常访问网络了: Properties props ...

  9. MYSQL Out of resources when opening file './xxx.MYD' (Errcode: 24)

    出现Out of resources when opening file './xxx.MYD' (Errcode: 24)错误是因为打开的文件数超过了my.cnf的--open-files-limi ...

  10. ExtJS遮罩层Ext.loadMask

    一.可以直接应用在元素上,如: var loadMarsk = new Ext.LoadMask(target, { msg:'正在处理数据,请稍候......', removeMask:true / ...