react-umi-对接Api-5.总结篇

最新推荐文章于 2025-11-14 01:35:44 发布

An_s

最新推荐文章于 2025-11-14 01:35:44 发布

阅读量901

点赞数

CC 4.0 BY-SA版权

分类专栏： umi3+egg中台实战项目文章标签： reactjs typescript umi

本文链接：https://blog.youkuaiyun.com/echo_Ae/article/details/111405137

umi3+egg中台实战项目专栏收录该内容

32 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

该博客总结了使用umi框架对接API的过程，包括网络请求封装、防抖节流功能、动态路由与布局获取用户信息、登录模块的实现。特别强调了umi框架中登录模块的正确流程，即先获取token再刷新页面请求用户信息和路由菜单。此外，还涵盖了菜单、角色和管理员的CURD操作。

我们对接完api了实现了

网络请求封装（记录路由（返回上一页）- 登录成功使用）
防抖节流睡眠功能封装
动态路由（菜单）以及layout布局获取用户信息
登录模块
菜单模块
角色模块
管理员模块

网络请求封装

src - app.tsx

/ 网络请求封装
export const request: RequestConfig = {
   
   
  prefix: 'xxxx', // 域名设置
  headers

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

An_s

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

react-umi-对接Api-4.管理员模块

echo_Ae的博客

12-19

378

管理员登陆演示本篇看点：管理员的CURD src - pages - authority - adminUser index.tsx import React, { useRef, useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tag, Popconfirm, message, Badge, Tooltip } from 'antd';..

react-umi-对接Api.网络请求封装以及Layout布局获取用户信息（动态路由）返回记录路由以及防抖节流睡眠功能实现

echo_Ae的博客

12-19

1103

本篇看点字符串component转成函数component antd4 动态Icon 网络请求封装 Layout布局获取用户信息（动态路由以及动态菜单）记录路由（返回上一页）防抖节流睡眠功能实现 app.tsx import React from 'react'; import { history } from 'umi'; import { message } from 'antd'; import qs from 'qs'; import { encode } from 'js-base64'

2 条评论您还未登录，请先登录后发表或查看评论

dumi：组件库开发的静态站点生成器

最新发布

gitblog_00896的博客

11-14

452

在现代前端开发中，组件库扮演着至关重要的角色，它能够提高开发效率，统一项目规范。dumi 作为一个专注于组件库开发的静态站点生成器，旨在帮助开发者快速搭建功能丰富的组件文档和示例展示页面。它不仅提供了丰富的文档编写功能，还支持Markdown编写模式，让开发者能够轻松上手。 ## 项目技术分析 dumi 基于React进行开发，利用了React的组件化思想，使其在处理组件库的文档和示例展示上更

react-umi-对接Api-1.登录模块

echo_Ae的博客

12-19

1011

本篇看点：我们设计了一个很漂亮的登录UI ProForm组件的使用跳转记录路由提交前使用md5加密 src - pages - login index.tsx import React, { FC } from 'react'; import { history } from 'umi'; import { message } from 'antd'; import ProForm, { ProFormText } from '@ant-design/pro-form'; import { Use

前端框架（react+umi+dva+ant design pro ）攻克: 一、typescript接口(三）

热水钟博客

01-08

598

接口一、接口在typescript中定义的本质是：定义好对象的属性及类的具体结构，即约束他们的类型检查，从而增加代码可拓展性和可维护性。简单总结就是：代码合规性的契约定义。二、接口如何定义，即接口在各个场景是的应用举例：（一）定义对象的外形，约定对象必须有哪些属性（1）最常见的： interface LabelledValue { label: string; } （2）可选属性定义：可选属性名字定义的后面加一个?符号。 interface ...

umi官方文档中的常见API

你是我修复不了的bug，但我会用一生去维护

05-24

3466

umi官方文档中的常见API 基本API dynamic 动态加载组件常见使用场景：组件体积太大，不适合直接计入bundle中，以免影响首屏加载速度。例如：某组件HugeA包含巨大的实现/依赖了巨大的三方库，且该组件HugeA的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic就该上场了为什么使用dynamic：封装了使用一个异步组件需要做的状态维护工作，开发者可以更加专注于自己的业务组件开发，而不必关心code spliting、async module loading等等技术细节通常搭配

react-umi-对接Api-3.角色模块

echo_Ae的博客

12-19

352

分配权限树演示本篇看点：角色的CURD 分配权限树实现 src - pages - authority - adminRole index.tsx import React, { useRef, useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tag, Popconfirm, message, Badge, Modal, Tree } fr..

react-umi-2-5.菜单列表

echo_Ae的博客

12-07

612

index.tsx import React, { useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Button, Tooltip, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd'; import { QuestionCircleOutlined, HomeOutlined, PlusOut..

前端项目中react-umi框架的简单用法

lzfengquan的博客

01-26

6677

做完最近项目目发现umi是个好东西，但是没有用过，（目前写的react项目时原生的写法）现在尝试用umi做个简单的项目页面，如果大家有更好的信息技术可以咱们交流一下共同提高。 umi官网地址：https://umijs.org/zh-CN/docs/getting-started dva地址： https://dvajs.com/ 先简单了解一下什么是umi： Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能

使用UmiJS封装请求umi-request

与世无争的垃圾

05-11

6416

根据umi-request文档做了一个极简单的封装，错误处理，中间件可以根据文档自行添加请求代理在.umirc.js中配置proxy // request.js import { extend } from "umi-request"; const errmsgMap = { } const HttpRequest = function ({url, method, params}) { let config = { method, // 请求方式

umi call 后端 api

weixin_66886617的博客

03-28

1666

主思路使用 umi request包装的service api，并且做好参数交换。

react,umi,antd-pro的layout封装过程

Coralpapy的博客

12-09

1709

import React from 'react'; import { Layout, Form, Icon } from 'antd'; import isEqual from 'lodash/isEqual'; //深度比较对象 import memoizeOne from 'memoize-one'; //降低渲染的函数复杂度，提高性能 import { history, connect } from 'umi'; import { ContainerQuery } from 'react-co..

ant design pro v5拦截器配置token类比axios拦截

o__o__o__o的博客

05-05

4824

ant design pro v5拦截器配置token和axios拦截

UmiJS介绍--api（八）

热门推荐

eunice_sytin的博客

10-31

1万+

1.路由 1.1 umi/link 通过声明的方式做路由跳转。 import Link from 'umi/link'; export default () => { <div> /* 普通使用 */ <Link to="/list">Go to list page</Link> /* 带参数 */ <Link...

react与umi

weixin_30762087的博客

09-26

1597

我们知道umi 是一个编译工具，但它同时也是一个前端框架。它对社区的 webpack，react-router 等进行的封装，使得我们可以基于它快速搭建一个 React 项目。第一步：安装umi 第二步：创建目录，并写入配置在 umi 中，约定的存放页面代码的文件夹是 pages，是复数，不过我们可以添加 singular 为 true 来让 page 变为约定的文件夹。接下来让我们...

react+umi项目踩坑记

旺旺旺小小苏的博客

07-20

2576

在react项目中添加umi-plugin-react插件之后发现运行不起来了，报错提示如下：解决方法如下： 1、检查umi的版本，如果是3.0以上的那么需要Node 10.13或以上，如果版本没问题的话 2、升级umi-plugin-react为@umijs/preset-react 在pageage.json中修改依赖将umi-plugin-react修改为@umijs/preset-react 然后删除node_modules文件重新安装依赖即可 ...

使用 umi + dva 开发配置接口环境

冲锋

08-11

7677

乌米文档，创建项目模板啥的就不说了关于选择project，自定义开发的话，选择 app 选项，其它不多说了之后会问你选择 ts 吗？，是否使用antd， dva， code spliting ，dll，可选的，自己决定最后，启动项目，打开控制台，一堆警告，和错误提示，关于警告，就是react 钩子在新版本已经换名字了，现在的这些以后会过时了，都是 .umi 文件报的，并...

umi --api

qq_36303110的博客

01-25

594

API 基本API dynamic动态加载组件(通常搭配import语法) 使用场景：组件体积太大，不适合直接计入bundle，以免影响首屏加载速度。例如：某组件 HugeA 包含巨大的实现 / 依赖了巨大的三方库，且该组件 HugeA 的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic 就该上场了。 // 封装异步组件 AsyncHugeA import { dynamic } from 'umi'; export default dynamic({ loader: async fu

react-umi-3-1.动态路由实现并实现路由权限

echo_Ae的博客

12-08

4986

效果图：这时候让我们先把 pages 下面的 index.ts、index.less 删除掉这样看起来就整洁了很多好了开始正文。其实动态路由非常简单~实用umi框架之后，小伙伴们先来到umi文档运行时配置来让我们来实现 .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', },

React umi 请求完整接口路径

09-18

<think> 我们根据用户的问题和提供的引用来整理答案。用户的问题是：在React框架结合Umi中请求完整接口路径的方法。根据引用[2]和[3]，我们知道Umi是一个基于React的企业级前端框架，提供了开箱即用的功能，包括请求库（通常是Umi自带的request）和路由配置等。在Umi中，通常使用内置的`request`方法进行网络请求。此外，Umi也支持通过配置代理（proxy）来解决跨域问题，以及配置全局的请求前缀（baseUrl）。根据引用[4]，我们看到了`umirc`配置文件，其中可以设置一些全局配置，但并没有直接看到请求配置。实际上，Umi的请求配置通常在`.umirc.ts`或者`config/config.ts`中设置，如设置`proxy`或者`request`。另外，引用[3]中提到了动态路由的使用，但用户关心的是请求接口的完整路径。在Umi中，请求完整接口路径有以下几种方法： 1. 直接使用绝对路径：在调用`request`时传入完整的URL。 2. 配置请求前缀（baseUrl）：在配置文件中设置`request`的`prefix`，这样在请求时只需要写相对路径，会自动加上前缀。 3. 使用环境变量：Umi支持环境变量，可以在不同的环境下配置不同的基础路径。具体步骤： - 配置前缀（baseUrl）示例（在`.umirc.ts`或`config/config.ts`中）： ```javascript import { defineConfig } from 'umi'; export default defineConfig({ // ...其他配置 request: { dataField: 'data', // 根据后端返回的数据结构配置，比如你的后端返回数据在data字段中 }, // 设置请求拦截器和响应拦截器可以通过plugin-request插件，默认已经集成 // 设置请求前缀 proxy: { '/api': { target: 'http://your-api-server.com/', changeOrigin: true, pathRewrite: { '^/api': '' }, }, }, }); ``` 注意：上述配置了代理，将本地请求中以`/api`开头的请求代理到`http://your-api-server.com/`，同时去掉`/api`前缀。这样在代码中请求`/api/users`时，实际请求的是`http://your-api-server.com/users`。另外，也可以设置`request`的`prefix`： ```javascript // 在配置文件中 export default defineConfig({ request: { prefix: '/api', // 这样在请求时，如果url以'/'开头，会自动加上这个前缀 }, }); ``` 然后在代码中： ```javascript import { request } from 'umi'; // 请求 /api/users request('/users', { method: 'get', }).then(response => { console.log(response); }); ``` 这样实际请求的路径是`/api/users`。如果同时配置了代理，那么这个请求会被代理到目标服务器。 2. 使用环境变量：Umi默认支持环境变量，可以在项目根目录创建`.env`文件，设置： ``` API_BASE_URL=http://your-api-server.com/api ``` 然后在配置文件中读取环境变量，设置`request.prefix`为`process.env.API_BASE_URL`。 3. 在代码中拼接完整路径：如果接口地址是固定的，也可以在代码中直接写完整的URL，但这样不推荐，因为不利于维护和切换环境。 4. 使用运行时配置：Umi支持在`src/app.ts`中配置运行时请求设置，比如动态设置请求前缀（从环境变量读取等）。在`src/app.ts`中： ```javascript export const request: RequestConfig = { timeout: 1000, errorConfig: {}, middlewares: [], requestInterceptors: [ (url, options) => { // 在发送请求前处理url if (url.startsWith('/api')) { return { url: `http://your-api-server.com${url}`, options, }; } return { url, options }; }, ], responseInterceptors: [], }; ``` 但通常我们更倾向于使用配置代理或者设置前缀的方式。总结：推荐使用配置代理（proxy）和设置请求前缀（request.prefix）的方式来管理接口的完整路径。根据用户提供的引用，尤其是引用[4]中关于路由配置的示例，我们可以推测用户已经有一定的Umi使用基础。因此，我们重点讲解配置文件和请求方法。相关问题： 1. Umi中如何配置多个代理？ 2. Umi的request方法支持哪些配置项？ 3. 在Umi中如何根据环境变量（开发、测试、生产）设置不同的请求基础路径？ 4. 如何拦截请求并添加统一的认证头（如token）？ </think> ### React结合Umi框架请求完整接口路径的方法在React项目中使用Umi框架发送请求时，主要通过以下三种方式实现完整接口路径的请求： #### 1. **配置文件设置代理（推荐）** 在 `.umirc.ts` 或 `config/config.ts` 中配置代理，将特定前缀路径映射到目标服务器： ```javascript // .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ proxy: { '/api': { // 请求前缀 target: 'https://your-api-server.com', // 目标服务器 changeOrigin: true, pathRewrite: { '^/api': '' }, // 重写路径 } } }); ``` 发送请求时只需使用相对路径： ```javascript // 实际请求 https://your-api-server.com/users request('/api/users'); ``` #### 2. **直接使用绝对路径** 在请求方法中直接写入完整URL： ```javascript import { request } from 'umi'; request('https://your-api-server.com/users', { method: 'GET' }); ``` #### 3. **运行时动态拼接路径** 使用环境变量动态构建URL： ```javascript const API_BASE = process.env.NODE_ENV === 'production' ? 'https://prod-api.com' : 'https://dev-api.com'; request(`${API_BASE}/users`); ``` #### 配置说明 | 方法 | 适用场景 | 优势 | |--------------------|--------------------------------|--------------------------| | 代理配置 | 开发环境跨域/API网关统一管理 | 自动处理跨域，路径解耦 | | 绝对路径 | 临时调试/第三方API | 简单直接 | | 运行时动态拼接 | 多环境部署 | 灵活切换环境 | [^1][^2][^4] --- ### 常见问题场景 1. **跨域问题** 开发环境下必须通过代理配置解决，生产环境需配置Nginx或API网关。 2. **全局请求拦截** 在 `src/app.ts` 中添加拦截器统一处理： ```javascript export const request = { prefix: '/api', // 全局请求前缀 errorHandler: (error) => { /* 统一错误处理 */ }, requestInterceptors: [ (url, options) => { options.headers.Authorization = 'Bearer xxx'; return { url, options } }] }; ``` 3. **Path参数拼接** 动态路径需手动拼接： ```javascript const userId = 123; request(`/api/users/${userId}/profile`); ``` [^3][^5] --- ### 注意事项 1. Umi默认集成 `umi-request` 库（类似axios） 2. 生产环境需关闭代理，直接对接后端服务 3. 使用 `process.env.UMI_APP_BASE_API` 可读取 `.env` 中定义的全局API地址 [^2][^4] ---