若依ruoyi-vue前端异常处理

/utils/request.js 文件是基于 axios 的封装,用于统一处理请求参数、请求头、错误提示信息等。这些功能的封装使得在 Ruoyi Vue 中进行 HTTP 请求时可以更加方便和统一,同时也提高了代码的可维护性和可扩展性。下面是对这些功能的具体描述:

  1. 全局 request 拦截器:在请求发送前会执行的拦截器,可以在这里统一设置请求头部信息等。
// request拦截器
service.interceptors.request.use(config => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === falseif (getToken() && !isToken) {config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === 'get' && config.params) {let url = config.url + '?' + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {const requestObj = {url: config.url,data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,time: new Date().getTime()}const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小const limitSize = 5 * 1024 * 1024; // 限制存放数据5Mif (requestSize >= limitSize) {console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制,无法进行防重复提交验证。')return config;}const sessionObj = cache.session.getJSON('sessionObj')if (sessionObj === undefined || sessionObj === null || sessionObj === '') {cache.session.setJSON('sessionObj', requestObj)} else {const s_url = sessionObj.url;                  // 请求地址const s_data = sessionObj.data;                // 请求数据const s_time = sessionObj.time;                // 请求时间const interval = 1000;                         // 间隔时间(ms),小于此时间视为重复提交if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {const message = '数据正在处理,请勿重复提交';console.warn(`[${s_url}]: ` + message)return Promise.reject(new Error(message))} else {cache.session.setJSON('sessionObj', requestObj)}}}return config
}, error => {console.log(error)Promise.reject(error)
})
  1. 全局 response 拦截器:在接收到响应后会执行的拦截器,可以在这里统一处理响应数据,比如对错误进行统一处理。
// 响应拦截器
service.interceptors.response.use(res => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode['default']// 二进制数据则直接返回if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {return res.data}if (code === 401) {if (!isRelogin.show) {isRelogin.show = true;MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {isRelogin.show = false;store.dispatch('LogOut').then(() => {const currentUrl = window.location.hreflocation.href = currentUrl.substring(currentUrl.indexOf("/"))})}).catch(() => {isRelogin.show = false;});}return Promise.reject('无效的会话,或者会话已过期,请重新登录。')} else if (code === 500) {Message({ message: msg, type: 'error' })return Promise.reject(new Error(msg))} else if (code === 601) {Message({ message: msg, type: 'warning' })return Promise.reject('error')} else if (code !== 200) {Notification.error({ title: msg })return Promise.reject('error')} else {return res.data}},error => {console.log('err' + error)let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}Message({ message: message, type: 'error', duration: 5 * 1000 })return Promise.reject(error)}
)
  1. 统一的错误处理:通过 response 拦截器统一处理错误响应,可以根据错误码在 errorCode.js 中设置对应的错误信息,并进行统一的错误提示或者其他处理。
export default {'401': '认证失败,无法访问系统资源','403': '当前操作没有权限','404': '访问资源不存在','default': '系统未知错误,请反馈给管理员'
}
  1. 超时处理:通过 axios 的配置项可以设置请求超时时间,在超时后可以进行相应的处理。
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项,表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_API,// 超时timeout: 10000
})
  1. baseURL 设置:可以在这里设置请求的基础 URL,方便统一管理接口地址。
    在.env.development或者.env.production或者.env.staging文件里面可以设置:
# 若依管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'

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

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

相关文章

数据挖掘实战-基于深度学习RNN+CNN的能源价格预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

深入理解 LinkedList 及底层源码分析

LinkedList 是基于链表结构的一种 List&#xff0c;在分析 LinkedList 源码前我们先对对链表结构做一个简单的了解。 一、链表的概念 链表是由一系列非连续的节点组成的存储结构&#xff0c;简单分下类的话&#xff0c;链表又分为_单向链表和双向链表&#xff0c;而单向 / 双…

layui 数据表格 拖动 列、行 位置 重新排序 等

先贴官网 layui官网 &#xff1b; 再贴一个要使用的 插件官网 &#xff1a; layui-soul-table 示例文档 &#xff1b; 这个插件功能很多 看到那个下载 后悔没早点知道啊 还自己写了 一个下载 可以到官网看看 很多实用的 需要引入的 js layui.config({base: rootPath…

CANape中,Event list和DAQ list的区别介绍

1 基本介绍 在 Vector 的 CANape 中,事件列表 (Event list) 和 DAQ 列表 (DAQ list) 都用于定义和管理数据采集 (DAQ) 事件。但是,它们在目的和功能上有所不同。 事件列表 用于定义触发数据采集的事件。事件列表中的每个事件都与一组信号和触发条件相关联。当满足触发条件时…

检测服务器环境,实现快速部署。适用于CRMEB_PRO/多店

运行效果如图&#xff1a; 最近被好多人问&#xff0c;本来运行的好好的&#xff0c;突然swoole就启动不了了。 本工具为爱发电&#xff0c;如果工具正好解决了您的需求。我会很开心 代码如下&#xff1a; """本脚本为爱发电by:网前雨刮器 """…

如何翻译外文文献【攻略】

如何翻译外文文献【攻略】 前言版权推荐如何翻译外文文献简单描述第一步 准备一篇外文文献第二步 翻译网站第三步 解锁文档第四步 编辑dpf第五步 pdf转为word第六步 编辑word第七步 word转为pdf 最后 前言 2024-5-7 14:50:14 以下内容源自《【攻略】》 仅供学习交流使用 版权…

盘点!抖音运营中最常见的10大问题

1、播放一直卡500&#xff0c;无法突破 播放量突破不了500的情况很常见&#xff0c;一般原因有3个&#xff1a;被限流、不推流、推流不精准。 前两个好说&#xff0c;第一个原因可以去创作者中心进行一下账号检测&#xff0c;第二个要么是视频质量不过关&#xff0c;要么是和…

Spring Boot中一般如何使用线程池?

在Spring Boot应用程序中&#xff0c;合理地使用线程池可以有效地提高系统的性能和并发处理能力。本文将深入探讨Spring Boot中如何一般性地使用线程池&#xff0c;包括线程池的配置、使用方式以及一些最佳实践。 1. 线程池的作用与好处 线程池是一种用于管理线程的机制&…

【全网首发】Typecho文章采集器火车头插件去授权版

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 目前市面上基本没有typecho火车头采集器 而分享的这一款采集器&#xff0c;牛的一批 内置使用方法与教程&#xff01; 二、效果展示 1.部分代码 代码如下&#xff08;示例&#…

串的模式匹配之KMP算法实现

概述 函数刻画 主串位置不变&#xff0c;next值就是模式串(子串)比较后应跳转的位置 不同位置 next[j]函数 next由模式串决定&#xff0c;看模式串当前比较位的前串中前后缀相同的个数来得k-1的值&#xff0c;next[当前位]k1 小补充 PM值&#xff1a;也称部分匹配值&#xf…

Redis Cluster on K8s 大揭密

之前我们针对 Redis 容器化&#xff0c;做了一些讨论&#xff1a; 《Redis 容器化&#xff0c;是不是个“软柿子”》&#xff0c;业界不乏相关的实践分享&#xff0c;KubeBlocks 也针对 Redis Cluster 做了适配并有对应的解决方案。在 Redis 容器化的过程中&#xff0c;KubeBlo…

JDBCD的相关应用

对比statement和preparedstatement statement存在SQL注入问题&#xff0c;preparedstatement解决了SQL注入问题。 statement&#xff1a;存在SQL注入现象&#xff0c;编译一次执行一次。 preparedstatement&#xff1a;解决了SQL注入问题&#xff0c;编译一次&#xff0c;可…

【学习AI-相关路程-工具使用-NVIDIA SDK MANAGER==NVIDIA-jetson刷机工具安装使用 】

【学习AI-相关路程-工具使用-NVIDIA SDK manager-NVIDIA-jetson刷机工具安装使用 】 1、前言2、环境配置3、知识点了解&#xff08;1&#xff09;jetson 系列硬件了解&#xff08;2&#xff09;以下大致罗列jetson系列1. Jetson Nano2. Jetson TX23. Jetson Xavier NX4. Jetson…

Hadoop之路---hive安装与配置

上文我们说完了hadoop的安装配置全流程,现在让我们来安装一下hive&#xff0c;他是基于hadoop的数据仓库&#xff0c;实质即为一个将MR任务封装为易于编写的hql语句&#xff08;类似于sql语句&#xff09;的组件。安装hive的前提是你要先安装jdk,hadoop,mysql。下面我们还是在w…

YouTube广告全教学:形式、投放步骤与技巧(2024年更新)

YouTube作为全球最大的视频分享和观看平台吸引了大量的观众&#xff0c;这一平台以其无与伦比的用户参与度和覆盖范围&#xff0c;重新定义了人们获取与分享知识的方式&#xff0c;同时也为企业开辟了一片前所未有的营销蓝海。 据统计&#xff0c;全球观众平均每天观看 YouTub…

超疏水TiO₂纳米纤维网膜的良好性能

超疏水TiO₂纳米纤维网膜是一种具有特殊性能的材料&#xff0c;它结合了TiO₂的光催化性能和超疏水表面的自清洁、防腐、防污等特性。这种材料在防水、自清洁、油水分离等领域具有广阔的应用前景。 制备超疏水TiO₂纳米纤维网膜的过程中&#xff0c;通过精确控制纺丝溶液的成分…

揭秘前端开发的“薪”机遇

众所周知&#xff0c;华为开发者大会2023&#xff0c;宣布不再兼容安卓&#xff0c;同时宣布了“鸿飞计划”&#xff0c;欲与iOS、安卓在市场三分天下&#xff0c;这对中国国产操作系统而言&#xff0c;具有划时代的意义。 最近有不少前端的开发者来咨询鸿蒙开发&#xff0c;今…

OpenNJet : 下一代云原生应用引擎

本心、输入输出、结果 文章目录 OpenNJet &#xff1a; 下一代云原生应用引擎前言OpenNJet 技术架构安装 OpenNJet为什么有了 OpenNJetOpenNJet 和 NGINX 是什么关系什么是云原生应用引擎&#xff1f;OpenNJet 的有哪些优势OpenNJet 的有哪些优势 OpenNJet 与国产化OpenNJet 使…

Llama 3 超级课堂

https://github.com/SmartFlowAI/Llama3-Tutorial/tree/main 第一节作业 streamlit run web_demo.py /root/share/new_models/meta-llama/Meta-Llama-3-8B-Instruct

一键静音,iPhone勿扰模式助你远离干扰

在现代社会的快节奏生活中&#xff0c;我们时常被各种各样的通知、铃声和提示音所打扰&#xff0c;无法专注地工作或享受宁静的时光。而iPhone的勿扰模式功能&#xff0c;就像是一位贴心的助手&#xff0c;能够一键帮你屏蔽这些干扰&#xff0c;让你在需要的时候拥有一个清静的…