vue 统一异常处理

vue项目统一响应_在vue项目中:统一封装 Axios 接口与异常处理 如图,面对一团糟代码的你~~~真的想说,What FUC~K!!!回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转... 阅读详情
import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'
import { Message } from 'element-ui'


const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})


/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  //============== 所有请求完成后都要执行的操作 ==================
  // 根据返回的code值来做不同的提示信息处理(和后端约定)
  const msgData = response.data
  debugger
  if (msgData) {
    const msg = msgData.msg
    switch (msgData.code) {
      // 401, token失效
      case 401:
        if (msg) {
          Message.warning(msg)
        }
        clearLoginInfo()
        router.push({name: 'login'})
        break
      //用于警告的提示
      case 110:
        if (msg) {
          Message.warning(msg)
        }
        break
      //操作成功后的提示
      case 0:
        if (msg) {
          Message.success(msg)
        }
        break
      // 其他错误,直接抛出错误提示
      default:
        if (msg) {
          Message.error(msg)
        }
    }
  }
  return response
}, error => {
  return Promise.reject(error)
})


/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http
Vue项目封装API接口及Axios请求与响应拦截,异常处理 前言:在实际的项目中,面对大量的使用axios请求数据,会使项目代码又多又乱,封装接口API与Axios的重要性不言而喻,不仅可以使代码更加的简洁优雅,而且会使修改接口,维护代码变得更加简单清晰。 一.Axios的封装 在vue项目中我们使用的是axios进行数据请求,还可以利用它进行请求拦截,响应拦截等操作 1. 安装 npm install axios; // 安装axios 2. 配置 在... 阅读详情

相关推荐

SpringBoot+Vue使用——统一返回格式+统一异常处理(使用AOP)

Spring分为:IOC(容器)和 AOP(面向切面编程),其中 Spring IOC做的事是:控制反转,依赖注入;AOP的的底层是一个动态代理(在不改变源代码的情况下,给代码增加一些东西,但不能改变方法的本质,也是统一在方法执行前干什么,方法执行后干什么),切面其实就是方法,也即在不改变代码的情况下,给原有的方法做方法增强 注意: 到目前为止,会发现:所有的框架其实不是为了方便编程,而是为了方便代码维护(容易改代码) 过滤器是对请求进行拦截,AOP是对方法进行拦截 1、导AOP包 注:在..

weixin_42067873的博客 488

【Vue项目】通过设置全局的异常处理来统一处理后端返回的异常

在Vue项目中,通常会遇到一些后端返回的异常,对于一些共性的状态码,一个接口一次异常捕获就显得非常繁琐。本文将介绍两种处理方式,可以通过设置全局的异常处理来统一处理后端返回的异常。其他异常也会被捕获并处理,可以根据实际需求进行相应的处理逻辑。使用插件方式的好处是可以更好地封装全局异常处理逻辑,并且在多个组件中共享。大家还有哪些方法,huozhe 大家遇到类似问题,欢迎评论区讨论,如有错误之处,敬请留言!

记录并分享一些日常工作和学习笔记 6429

TS808效果器制作教程

TS808效果器制作教程 可以在立创商城购买到大部分的电阻电容和IC,音频接口,踩钉,电位器和电源接口可以去某宝看看都买得到的。链接https//pan.baidu.com/s/1QId1eIE3fJ2u5NLBSISvGA。安装过程过于繁琐,把所有元器件按照图纸焊接完成就可以调试了,祝你们成功!这是TS808经典效果器制作过程的记录。IC是JRC4558。...

qq_18948149的博客 3429

Vue实现全局异常处理的几种方案

在开发组件库或者插件,经常会需要进行全局异常处理,从而实现:那么如何实现上面功能呢?本文先简单实现一个异常处理方法,然后结合 Vue3 源码中的实现详细介绍,最后总结实现异常处理的几个核心。本文 Vue3 版本为 3.0.11一、前端常见异常对于前端来说,常见的异常比较多,比如:等等最常用的比如:通过 window.onerror文档[2]可知,当 JS 运行时发生错误(包括语法错误),触发 window.onerror(): 函数参数:若该函数返回true,则阻止执行默认事件处理函数。另外,我们也经常会使

sdasadasds的博客 4442

一文详细讲解CRM系统(附架构图、流程、功能介绍)

专为中小企业量身打造高性价比的数字化转型路径!企业如何用CRM才能真正做到降本增效?今天,就用一文讲清这些问题!读完本文,你将清楚得了解CRM的概念、框架、流程、功能、企业成功案例,文末还有常见问题解答。

Dabeishandong的博客 9931

Spring Boot 实现多图片上传并回显,涨姿势了~

上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可。由于是多图片上传所以用数组来接。此处应该注意参数名应该和<input>中的name值相对应: @RequestMapping("/pic") @ResponseBody publicResponseEntity<String>pic(MultipartFile[]pictures)throwsException{ ResponseEnti...

weixin_54556126的博客 894

手写VUE后台管理系统10 - 封装Axios实现异常统一处理

从零开始手写VUE后台管理系统,封装Axios

死牛胖子的技术随笔 1158

在Ubuntu 22.04上从零搭建FVCOM环境:手把手搞定Linux、Intel编译器与NetCDF库

本文详细指导在Ubuntu 22.04上从零搭建FVCOM环境,涵盖Linux系统配置、Intel编译器安装、NetCDF库编译及常见问题解决。通过手把手教程,帮助科研人员高效完成水动力数值模拟环境的部署,特别适合水环境研究领域的初学者。

weixin_30613727的博客 651

SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装

SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装 文章目录SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装前后端分离开发中的异常处理统一结果封装后端全局异常捕获及处理前端axios后置拦截器 前后端分离开发中的异常处理   在我们的前后端分离项目中,有时候不可避免发生后端服务报错抛出异常的情况,如果不配置全局异常处理机制,就会默认返回tomcat或者nginx的5XX页面,对普通用户来说,不太友好,用户也不懂什么情况。这时候需要我们程序员设计返回一个友好简

qq_44709990的博客 5699

“傻瓜”学计量——双重差分DID3(多期双重差分原理+解决方案CSDID原理)

“傻瓜”学计量——双重差分DID3(多期双重差分原理+解决方案CSDID原理)

nnpersistent的博客 5060

GD32F407工程模板搭建全记录:从零整理固件库、创建文件夹到编译通过

本文详细记录了GD32F407工程模板的搭建过程,从固件库整理、目录规划到Keil环境配置,帮助开发者快速搭建可维护的嵌入式工程结构。重点介绍了开发环境搭建、工程目录设计、Keil配置及常见编译问题解决方案,适合嵌入式开发者参考。

weixin_29164497的博客 122

在Vue中如何处理异常和错误?请说明常用的方法和技术

Vue.js是一款流行的JavaScript框架,它的易用性和灵活性使得它成为前端开发者们的首选。在Vue开发过程中,处理异常和错误是非常重要的一环

有我更精彩的博客 5402

3. NVIDIA GPU Xid 常见错误码全解析、故障定位与标准化处理方案

摘要: Xid是NVIDIA显卡驱动记录的硬件/软件异常日志,通过dmesg等工具可获取,包含PCI总线、GPU编号、故障码等信息,是诊断显卡问题的核心依据。Xid故障分为四类:应用程序类(如代码错误,Xid13/31)、显存ECC硬件类(如显存损坏,Xid48/63)、链路/供电温控类(如PCIe故障,Xid74/79)和GSP固件类(如静电干扰,Xid119/154)。排查流程包括日志采集、软件修复(如重启进程、升级驱动)、硬件检查(如PCIe链路状态)及断电复位(针对GSP故障)。预防措施包括监控EC

jundao1997的专栏 715

在vue项目中:统一封装 Axios 接口与异常处理

在vue项目中:统一封装 Axios 接口与异常处理

asdfgh0077的博客 155

Unity零基础到进阶 | Unity中的内存泄漏全解析,原因、排查及避免

Unity 内存泄漏并非传统C++语境中的野指针或未释放堆内存,而是基于其「托管内存(C#)+ 原生内存(引擎/非托管)」双架构的特殊问题——即已废弃、不再被业务逻辑使用的内存块,无法被引擎或系统自动回收,持续占用内存空间,最终引发内存暴涨、GC卡顿、OOM(内存溢出)崩溃,其中移动端、主机端受影响最显著。 Unity 内存主要分为三类,其中泄漏仅发生在前两类,栈内存因系统自动分配/释放,无泄漏风险:

努力前行,总会成为自己心中的那道光 1万+

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

在vue中,Axios的统一封装和API接口的异常处理

原文链接:https://juejin.im/post/5b55c118f265da0f6f1aa354 来源:掘金 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃...

_淘淘子的博客 872

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

Vue-如何封装axios并且统一管理api

在vue项目中,经常会使用到axios来与后台进行数据交互,axios丰富的api满足我们基本的需求。但是对于项目而言,我们需要将其公共部分封装起来,比如异常处理,请求拦截等。本文讲述,如何在vue中封装axios。 安装 // 安装 cnpm install axios cnpm install vue-axios 引入 在main.j...

the_renaissance的博客 1954

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

vue_axios请求封装、异常拦截统一处理

1、前端网络请求封装、异常统一处理 vue中采用axios处理网络请求,避免请求接口重复代码,以及各种网络情况造成的异常情况的判断,采用axios请求封装和异常拦截操作; axios 请求封装 // 引入axios文件包 import axios from 'axios' // POST 方法封装 (参数处理) export const postRequest = (url, params)...

Lily-HU 2343

SSM8==纯注解SSM项目:实现单表CRUD、事务、自定义异常和统一异常处理、RESTFUL风格接口、统一返回值格式(状态码、内容、消息)、JSON传参、axios、vue.js、elementUI

环境:IDEA2021+JDK8+MAVEN3.8+TOMCAT7插件 前端:axios、vue.js、elementUI 后端:见POM.XML相关依赖,主要有数据库MySQL5.7 ,数据源Druid,持久层狂框架mybatis,mybatis-spring、spring核心容器、spring事务、spring MVC、测试junit和spring-test web服务器:tomcat7插件 ====================================================

hebian1994的博客 664

十二 定义规范统一的返回接口Rusult和异常处理--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

通常,商业系统需要保证接口的返回类型一致性和规范性本次任务,我们学习springboot-接口返回统一规范封装的方法。

wdyan297的博客 2671

.net6Api返回统一结果+Vue3前端访问

在我们开发api的时候,需要让接口返回统一的接口,这样容易理解,也容易管理。所以封装返回的统一结果是非常必要的。下面介绍3种方案。

故里2130 2482

Java框架快速入门: SSM整合进阶——统一异常处理与前后端联调实战

本文摘要: 针对SSM项目中异常处理分散的问题,提出统一异常处理方案。通过自定义业务异常(BusinessException)和系统异常(SystemException),结合状态码枚举类实现分类管理。在Service层主动包装原始异常,利用@RestControllerAdvice全局拦截异常,使用@ExceptionHandler分类型处理并返回统一JSON结构。方案遵循"异常向上抛+集中处理"原则,覆盖数据层、业务层到表现层的全链路异常,最终实现前后端协议联调,确保错误信息标准化返回。核心流程包括:异

Wang的专栏 328
上一篇: Java面试题:缓存三大问题及解决方案!
下一篇: 浅析VO、DTO、DO、PO的概念、区别和用处
ole_triangle_java
博客等级 码龄10年 82粉丝 83原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值