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

时间: 2024-11-02 12:27:51

Ant Design Pro 中的服务端交互的相关文章

实战 ant design pro 中的坑

1.前戏: 1,替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/*的链接换成 http://localhost:8080/ export default noProxy ? {'GET /api/*':'http://localhost:8080/'} : delay(proxy, 1000); 2.启动: window:npm run start:no-proxy 其他系统没试 坑 1. what?这是什么鬼没设置ke

Ant Design Pro路由菜单

config /config.js配置list路由指向页面../layouts/NewPage import defaultSettings from './defaultSettings'; // https://umijs.org/config/ import slash from 'slash2'; import webpackPlugin from './plugin.config'; const { pwa, primaryColor } = defaultSettings; // p

ant design pro (十二)advanced UI 测试

一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可以放心的重构代码和新增功能. Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案,在项目根目录运行以下命令就能运行测试用例. npm run test:all # 执行所有测试 二.详细 2.1.单元测试 单元测试用于测试 React UI 组件的表现.我们

Android WebView与服务端交互Demo

使用WebView可以让Android端的开发工作大量减少,原因是在服务端可以为其做一定的工作,下面这个小Demo就实现了从Android客户端与服务端的交互.我这里客户端使用的工具是Eclipse,服务端使用MyEclipse. 实现效果图: 客户端: 点击登录按钮后,页面跳转,而在服务端Console中看到如下(只看最后一行即可): 可以看到服务端收到了客户端发过来的用户名:yao. 源代码: 客户端: activity_main: <RelativeLayout xmlns:android

ant design pro (十四)advanced 使用 CLI 工具

一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提供了如下功能: pro new 新建一个脚手架,会自动将最新的 Ant Design Pro 脚手架下载到本地并安装 pro generate 新建一个模板,包含 model.service.page.component 二.使用过程 2.1.如何使用 使用 npm 安装到本地 npm instal

Nginx 部署 Ant Design pro

利用Ant Design pro开发的项目,如何用Nginx部署呢? 第一步:把项目打包,打包命令如下: npm run build 运行完毕会在项目目录下生成dist文件夹. 第二步:想要测试打包好的代码是否可以正常运行,安装serve,如下命令 npm i serve -g serve安装完毕,利用serve运行打包好的代码,运行命令: serve dist 测试完毕,代码可以正常运行. 第三步:用Nginx进行部署. 1.下载Nginx:http://nginx.org/en/downlo

SpringBoot整合Ant Design Pro进行部署

一.Ant Design Pro 打包 1.1 运行 build打包 $ npm run build 1.2 将打包生成的静态文件拷贝到spring boot 项目中 构建打包成功之后,会在根目录生成 dist 文件夹,然后将dist 文件夹里的的文件复制到 spring boot 项目的 /src/main/resources/static 目录下 二.配置spring boot 项目可访问到static目录下的index.html 2.1 以gradle为例导入spring-boot-sta

如何创建Pull Request,以开源项目ant design pro为例

声明:本文章也是我本人参考网络上的一些教程写的,毕竟我也是第一次为开源项目做贡献,心里难免有点小激动.所以用此文章来记录这个过程,和一些操作方式.同时留作以后可供参考. 背景:最近做了公司一个项目,具体项目我也就不说了,反正用了React+Umi+Ant Design Pro.具体情况是这样,使用官方的SettingDrawer实现了在线切换主题的功能,但是官方的控件中会有如下拷贝设置按钮一直显示. 然而我想要的效果如右图 可是我的项目上线后,不需要复制主题配置进行分享,仅开发过程中设置默认主题

python3中实现客户端与服务端交互发送文件

在python3中实现客户端与服务端程序交互,从客户端发送文件到服务端 客户端代码:client.py #!/usr/bin/env python #_*_ encoding=utf-8 _*_ import socket,sys,os ip_port = ('127.0.0.1',9999) sk = socket.socket() sk.connect(ip_port) container = {'key':'','data':''} while True:     input_data =