ant design pro (七)和服务端进行交互
一、概述
原文地址:https://pro.ant.design/docs/server-cn
Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟数据的开发模式, 通过 Restful API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。
二、详细介绍
2.1、前端请求流程
在 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
// 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 (七)和服务端进行交互的更多相关文章
- Ant Design Pro 改变默认启动端口号
找到package.json文件,找到图位置加--port即可.
- Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)
Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
- ant design pro (八)构建和发布
一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
- 【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记(三)
前言:前一篇记录了[后台管理系统]目前进展开发中遇到的一些应用点,这一篇会梳理一些自己学习Ant Design Pro源码的功能点.附:Ant Design Pro 在线预览地址. Dashboard ...
- 轻松玩转Ant Design Pro一
ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的, ...
- ant design pro超详细入门教程
1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...
- ant design pro (十二)advanced UI 测试
一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...
随机推荐
- 【20181026T1】**手枪【dfs】
题面 [错解] 百年难得一见之提高考搜索了 ...怎么搞啊 相当于是S进去有一个环? tarjan? 跑个联通块,可以穿过去的连一条边? 好主意-- dfs写完了-- 哎等下? 5 5 .##.. # ...
- python实现图片验证码
1 验证基础知识1.1 Python生成随机验证码,需要使用PIL模块. # 安装 pip3 install pillow 1.2 创建图片 from PIL import Image img = I ...
- 是否排序好了 Exercise07_19
import java.util.Scanner; import java.util.Arrays; /** * @author 冰樱梦 * 时间2018年12月 * 题目:是否排序好了 * */ p ...
- bzoj1123 Blockade
Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n&l ...
- iOS防止button重复点击
项目中常会遇到在按钮的点击事件中去执行一些耗时操作.如果处理不当经常会出现连续多次点击push多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...
- 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 ...
- Internationalization composition diagram
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHJvdWJsZXNob290ZXI=/font/5a6L5L2T/fontsize/400/fill/I0 ...
- Java Http 设置代理
1.今天在Eclipse下面编译一个Http客户端时,发现可以连接局域网,连接不上外部网络,突然想起所用PC是通过代理访问网络的,设置代理后程序可以正常访问网络了: Properties props ...
- 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 ...
- ExtJS遮罩层Ext.loadMask
一.可以直接应用在元素上,如: var loadMarsk = new Ext.LoadMask(target, { msg:'正在处理数据,请稍候......', removeMask:true / ...