React18+TypeScript搭建通用中后台项目实战03 自定义加载状态组件

拦截器

请求拦截器

修改 src/api/request.ts

核心代码：

req.interceptors.request.use(// 拦截配置并更新配置config => {// 获取登录tokenconst token = localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization = "Bearer " + token}// 将修改后的配置返回return {...config}},// 拦截错误并注入错误信息error => {return Promise.reject(error);}
)

完整代码：

import axios from "axios";// 创建实例
const req = axios.create({baseURL: '/api',timeout: 3000,timeoutErrorMessage: "请求超时，请稍后再试",withCredentials: true, // 跨域headers: {'Content-Type': 'application/json',}
})// 请求拦截器
req.interceptors.request.use(// 拦截配置并更新配置config => {// 获取登录tokenconst token = localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization = "Bearer " + token}// 将修改后的配置返回return {...config}},// 拦截错误并注入错误信息error => {return Promise.reject(error);}
)// GET 请求
function get(url: string, params: any) {return req.get(url, {params})
}// POST 请求
function post(url: string, data: any) {return req.post(url, data)
}// 导出
export default {req,get,post,
}

响应拦截器

修改 src/api/request.ts

核心代码：

req.interceptors.response.use(// 拦截正常响应response=>{// 获取服务端响应的数据const data = response.data// 响应成功if (data.code===10000 && data.status === true){return data.data}// 响应失败：权限错误if (data.code === 10401 || data.status === 10403 ){message.error(data.msg)localStorage.removeItem("token")location.href="/login"return}// 其他错误message.error(data.msg)return Promise.reject(data)},// 拦截错误响应error => {return Promise.reject(error);}
)

完整代码：

import axios from "axios";
import {message} from "antd";// 创建实例
const req = axios.create({baseURL: '/api',timeout: 3000,timeoutErrorMessage: "请求超时，请稍后再试",withCredentials: true, // 跨域headers: {'Content-Type': 'application/json',}
})// 请求拦截器
req.interceptors.request.use(// 拦截配置并更新配置config => {// 获取登录tokenconst token = localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization = "Bearer " + token}// 将修改后的配置返回return {...config}},// 拦截错误并注入错误信息error => {return Promise.reject(error);}
)// 响应拦截器
req.interceptors.response.use(// 拦截正常响应response=>{// 获取服务端响应的数据const data = response.data// 响应成功if (data.code===10000 && data.status === true){return data.data}// 响应失败：权限错误if (data.code === 10401 || data.status === 10403 ){message.error(data.msg)localStorage.removeItem("token")location.href="/login"return}// 其他错误message.error(data.msg)return Promise.reject(data)},// 拦截错误响应error => {return Promise.reject(error);}
)// GET 请求
function get(url: string, params: any) {return req.get(url, {params})
}// POST 请求
function post(url: string, data: any) {return req.post(url, data)
}// 导出
export default {req,get,post,
}

实现加载状态组件

安装 less 依赖

yarn add -D less

src/components/loading/Loading.less

// 请求加载状态
.request-loading {position: fixed;top: 0;left: 0;bottom: 0;right: 0;display: flex;align-items: center;justify-content: center;font-size: 20px;
}

src/components/loading/Loading.tsx

import {Spin} from "antd";
import "./Loading.less"export default function Loading() {return <Spin size="large" className="request-loading"/>
}

src/components/loading/index.tsx

import ReactDOM from "react-dom/client";
import Loading from "@/components/loading/Loading.tsx";// 显示加载状态
const showLoading = () => {const dom = document.getElementById("loading");ReactDOM.createRoot(dom as HTMLElement).render(<Loading/>)
}export {showLoading,
}

src/api/request.ts

修改请求拦截器。

核心代码：

req.interceptors.request.use(// 拦截配置并更新配置config => {// 请求开始之前要展示加载状态showLoading()// 获取登录tokenconst token = localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization = "Bearer " + token}// 将修改后的配置返回return {...config}},// 拦截错误并注入错误信息error => {return Promise.reject(error);}
)

完整代码：

import axios from "axios";
import {message} from "antd";
import {showLoading} from "@/components/loading/Index.tsx";// 创建实例
const req = axios.create({baseURL: '/api',timeout: 3000,timeoutErrorMessage: "请求超时，请稍后再试",withCredentials: true, // 跨域headers: {'Content-Type': 'application/json',}
})// 请求拦截器
req.interceptors.request.use(// 拦截配置并更新配置config => {// 请求开始之前要展示加载状态showLoading()// 获取登录tokenconst token = localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization = "Bearer " + token}// 将修改后的配置返回return {...config}},// 拦截错误并注入错误信息error => {return Promise.reject(error);}
)// 响应拦截器
req.interceptors.response.use(// 拦截正常响应response=>{// 获取服务端响应的数据const data = response.data// 响应成功if (data.code===10000 && data.status === true){return data.data}// 响应失败：权限错误if (data.code === 10401 || data.status === 10403 ){message.error(data.msg)localStorage.removeItem("token")location.href="/login"return}// 其他错误message.error(data.msg)return Promise.reject(data)},// 拦截错误响应error => {return Promise.reject(error);}
)// GET 请求
export function get(url: string, params: any) {return req.get(url, {params})
}// POST 请求
function post(url: string, data: any) {return req.post(url, data)
}// 导出
export default {req,get,post,
}

src/page/Login.tsx

在登录页面测试。

import {useEffect} from "react";
import {get} from "@/api/request.ts";export default function Login() {useEffect(() => {get("/test", null).then(data => {console.log(data);}).catch(err => {console.log(err);})}, [])return (<div>Login</div>)
}

隐藏加载状态

修改 src/components/loading/index.tsx

核心代码：

const hideLoading = () => {if (count < 0) returncount--if (count === 0) {const dom = document.getElementById("loading") as HTMLElementlet root = document.getElementById("root") as HTMLElementroot.removeChild(dom)}
}

完整代码：

import ReactDOM from "react-dom/client";
import Loading from "@/components/loading/Loading.tsx";let count = 0; // 请求计数// 显示加载状态
const showLoading = () => {if (count === 0) {let root = document.getElementById("root") as HTMLElementconst dom = document.createElement("div")dom.setAttribute("id", "loading")root.appendChild(dom)ReactDOM.createRoot(dom as HTMLElement).render(<Loading/>)}count++
}// 隐藏加载状态
const hideLoading = () => {if (count < 0) returncount--if (count === 0) {const dom = document.getElementById("loading") as HTMLElementlet root = document.getElementById("root") as HTMLElementroot.removeChild(dom)}
}export {showLoading,hideLoading,
}

在响应拦截器中隐藏加载状态

修改 src/api/request.ts

核心代码：

req.interceptors.response.use(// 拦截正常响应response=>{// 关闭加载状态hideLoading()// 获取服务端响应的数据const data = response.data// 响应成功if (data.code===10000 && data.status === true){return data.data}// 响应失败：权限错误if (data.code === 10401 || data.status === 10403 ){message.error(data.msg)localStorage.removeItem("token")location.href="/login"return}// 其他错误message.error(data.msg)return Promise.reject(data)},// 拦截错误响应error => {// 关闭加载状态hideLoading()// 返回错误信息message.error(error.message)return Promise.reject(error.message);}
)

完整代码：

import axios from "axios";
import {message} from "antd";
import {hideLoading, showLoading} from "@/components/loading/Index.tsx";// 创建实例
const req = axios.create({baseURL: '/api',timeout: 3000,timeoutErrorMessage: "请求超时，请稍后再试",withCredentials: true, // 跨域headers: {'Content-Type': 'application/json',}
})// 请求拦截器
req.interceptors.request.use(// 拦截配置并更新配置config => {// 请求开始之前要展示加载状态showLoading()// 获取登录tokenconst token = localStorage.getItem("token")// 使用 JWT Tokenif (token) {config.headers.Authorization = "Bearer " + token}// 将修改后的配置返回return {...config}},// 拦截错误并注入错误信息error => {// 关闭加载状态hideLoading()// 返回错误信息return Promise.reject(error);}
)// 响应拦截器
req.interceptors.response.use(// 拦截正常响应response=>{// 关闭加载状态hideLoading()// 获取服务端响应的数据const data = response.data// 响应成功if (data.code===10000 && data.status === true){return data.data}// 响应失败：权限错误if (data.code === 10401 || data.status === 10403 ){message.error(data.msg)localStorage.removeItem("token")location.href="/login"return}// 其他错误message.error(data.msg)return Promise.reject(data)},// 拦截错误响应error => {// 关闭加载状态hideLoading()// 返回错误信息message.error(error.message)return Promise.reject(error.message);}
)// GET 请求
export function get(url: string, params: any) {return req.get(url, {params})
}// POST 请求
function post(url: string, data: any) {return req.post(url, data)
}// 导出
export default {req,get,post,
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/15579.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

kubernetes集群pod理论介绍

kubernetes集群pod理论介绍

前言 在 Kubernetes 中&#xff0c;Pod 是最小的可部署单元&#xff0c;它是一个或多个容器的集合&#xff0c;这些容器共享网络和存储资源&#xff0c;并在同一主机上运行。在本文中&#xff0c;我们将进一步探讨 Kubernetes 集群中的 Pod&#xff0c;包括 Pod 的定义、调度管…
阅读更多...
C++成员函数 - 析构函数

C++成员函数 - 析构函数

析构函数 析构函数 是特殊的成员函数&#xff0c;其 特征 如下&#xff1a; 1. 析构函数名是在类名前加上字符 ~ 。 2. 无参数无返回值类型。 3. 一个类只能有一个析构函数。若未显式定义&#xff0c;系统会自动生成默认的析构函数。注意&#xff1a;析构函数不能重 载 …
阅读更多...
组成aim的方法数2（无限多张）

组成aim的方法数2（无限多张）

题目描述&#xff1a;arr是面值数组&#xff0c;其中的值都是正数且没有重复&#xff0c;再给定一个正数aim&#xff0c;每个值都认为是一种面值&#xff0c;且认为张数是无线的&#xff0c;返回组成aim的方法数。例如&#xff0c;arr[1,2]&#xff0c;aim4&#xff0c;方法有&…
阅读更多...
Mysql基础（七）DQL之select 语句（二）

Mysql基础（七）DQL之select 语句（二）

一 select 语句续 WHERE子句后面跟着的是一个或多个条件,用于指定需要检索的行COUNT(): 多少条数据 where 11 和 count(1) 与 count(*) count(1)、count(*)和count(指定字段)之间的区别 ① order by 排序 mysql 之数据排序扩展 1、使用 order by 语句来实现排序2、排序可…
阅读更多...
洛谷P3574 [POI2014] FAR-FarmCraft（树形dp）

洛谷P3574 [POI2014] FAR-FarmCraft（树形dp）

洛谷 P 3574 [ P O I 2014 ] F A R − F a r m C r a f t &#xff08;树形 d p &#xff09; \Huge{洛谷P3574 [POI2014] FAR-FarmCraft&#xff08;树形dp&#xff09;} 洛谷P3574[POI2014]FAR−FarmCraft&#xff08;树形dp&#xff09; 文章目录 题意题目说明 思路标程 题目…
阅读更多...
nuxt: generate打包后访问资源404问题

nuxt: generate打包后访问资源404问题

现象 使用Nuxt.js开发的个人页面&#xff0c;部署到nginx服务器中&#xff0c;/_nuxt/*.js、/_nuxt/*.css等静态问题不能访问&#xff0c;提示404错误。 而我们的这些资源文件是存在的。 解决方法 加上此处代码进行上下文配置 baseURL: /nuxt/ 此时在nginx配置 /nuxt 代理 lo…
阅读更多...
【Maven打包将resources/lib/下的jar也打包进jar包中】

【Maven打包将resources/lib/下的jar也打包进jar包中】

Maven打包将resources/lib/下的jar也打包进jar包中 &#xff01;&#xff01;&#xff01;少走弯路 第一步 resources/lib/下引入jar ftp4j-1.7.2.jar替换为自己jar包的名称 <dependency><groupId>it.sauronsoftware.ftp4j</groupId><artifactId>ft…
阅读更多...
张大哥笔记：穷人都在拼命挣钱，而富人都在努力让自己更值钱

张大哥笔记：穷人都在拼命挣钱，而富人都在努力让自己更值钱

最近行业大佬&#xff0c;纷纷网红化&#xff0c;比如周鸿祎&#xff0c;雷军&#xff0c;刘强东纷纷下场&#xff01; 大佬当网红&#xff0c;图啥&#xff1f;当然是图钱了。 大佬都很精的&#xff0c;他们老早就运用媒体的传播杠杆&#xff0c;把自己热度炒起来。 在不断…
阅读更多...
hyperf 多对多关联模型

hyperf 多对多关联模型

这里使用到三张表&#xff0c;一张是用户&#xff08;users&#xff09;&#xff0c;一张是角色(roles)&#xff0c;一张是用户角色关联表(users_roles)&#xff0c; 首先创建用户模型、角色模型 php bin/hyperf.php gen:model users php bin/hyperf.php gen:model rolesusers…
阅读更多...
屎山代码SSM转换Springboot

屎山代码SSM转换Springboot

SSM项目转Springboot项目 最近很多人可能是在网上买的那种屎山代码&#xff0c;数据库都是拼音的那种 比如项目如下所示&#xff1a; 这种屎山代码我改过太多了&#xff0c;很多人可能无从下手&#xff0c;因为代码结构太混乱了&#xff0c;但是我改过太多这种代码&#xff0…
阅读更多...
[BT]小迪安全2023学习笔记（第29天：Web攻防-SQL盲注）

[BT]小迪安全2023学习笔记（第29天：Web攻防-SQL盲注）

第29天 盲注 基于布尔 ?id1 and length(database())7通过AND&#xff0c;当数据库名字长度等于7时返回正常页面&#xff0c;否则返回其他&#xff08;或错误&#xff09;页面 其他函数&#xff1a; left(databse(),a)&#xff1a;截取数据库名的左侧前a位字符 substr(a,b,c…
阅读更多...
Spring Boot：将文件推送到 FTP 服务器

Spring Boot：将文件推送到 FTP 服务器

在企业应用中&#xff0c;将文件推送到 FTP 服务器是一个常见的需求。本文将介绍如何在 Spring Boot 项目中实现将文件推送到 FTP 服务器&#xff0c;包括引入依赖、自定义配置和编写代码示例。 1. 引入依赖 首先&#xff0c;在 Spring Boot 项目的 pom.xml 文件中引入 Apach…
阅读更多...
QGraphicsView中鼠标位置图像缩放时不变

QGraphicsView中鼠标位置图像缩放时不变

设置QGraphicsView的变换锚和调整尺寸锚到鼠标下面的操作&#xff0c;是一个很常见的模式&#xff0c;尤其在实现图形视图的缩放和滚动功能时。这两行代码的作用是提高用户与图形界面交互的直观性和效率。 setTransformationAnchor(QGraphicsView::AnchorUnderMouse)&#xff1…
阅读更多...
ASP+ACCESS公司门户网站建设

ASP+ACCESS公司门户网站建设

【摘 要】随着计算机科学的发展&#xff0c;数据库技术在Internet中的应用越来越广泛&#xff0c;为广大网络用户提供了更加周到和人性化的服务。本文讲解了一个公司的网站的建设&#xff0c;它基于数据关联规则的公司个性化页面及动态数据生成案例&#xff0c;在网页方面&…
阅读更多...
甲方怒喷半小时：一次项目上线失败的深刻教训

甲方怒喷半小时：一次项目上线失败的深刻教训

哈喽大家好，这里是你们的老朋友小米~最近工作忙得不可开交，这不，昨夜又是一个通宵夜，因为一些原因导致了项目上线失败。今天在会议上被甲方喷了整整半个小时，我心里五味杂陈，但作为一个技术分享爱好者，我决定把这次经历记录下来，希望能给大家一些启发。 需求背景：一个…
阅读更多...
HDFS,HBase,MySQL，Elasticsearch ,MongoDB分别适合存储什么特征的数据?

HDFS,HBase,MySQL，Elasticsearch ,MongoDB分别适合存储什么特征的数据?

HDFS&#xff08;Hadoop Distributed File System&#xff09;通常用于存储大规模数据&#xff0c;适合存储结构化和非结构化数据&#xff0c;例如文本文件、日志数据、图像和视频等。 HBase是基于Hadoop的分布式数据库&#xff0c;适合存储大量非结构化和半结构化的数据&…
阅读更多...
编程基础：掌握运算符与优先级

编程基础：掌握运算符与优先级

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、运算符的基石&#xff1a;加减乘除 二、比较运算符&#xff1a;判断数值大小 三、整除…
阅读更多...
【Redis】String源码剖析：512MB大字符串的内存管理之道

【Redis】String源码剖析：512MB大字符串的内存管理之道

大家好&#xff0c;我是白晨&#xff0c;一个不是很能熬夜&#xff0c;但是也想日更的人。如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff0c;关注一下&#x1f440;白晨吧&#xff01;你的支持就是我最大的动力&#xff01;&#x1f4aa;&#x1f4aa;&#x1f4aa…
阅读更多...
WebSocket——相关介绍以及后端配置

WebSocket——相关介绍以及后端配置

一、WebSocket介绍&#xff1a; WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;旨在改进客户端和服务器之间的实时通信。以下是关于WebSocket的详细介绍&#xff1a; 1、定义与标准 WebSocket是独立的、创建在TCP上的协议&#xff0c;通过HTTP/1.1协议的10…
阅读更多...
13.js对象

13.js对象

定义 一种复杂数据类型&#xff0c;是无序的&#xff08;不保留键的插入顺序&#xff09;&#xff0c;以键值对&#xff08;{key:value})形式存放的数据集合 对象的创建 &#xff08;1&#xff09;字面量创建 var 对象名{ } &#xff08;2&#xff09;内部构造函数创建 v…
阅读更多...
最新文章

Copyright @ 2022~2023