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

已于 2023-12-12 15:23:40 修改
阅读量849 收藏 1
点赞数
分类专栏： 大前端 文章标签： vue3 vite ts axios
于 2023-12-11 16:24:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongm24/article/details/134928173
版权

目录

在这里插入图片描述

axios 是一个易用、简洁且高效的http库
axios 中文文档：http://www.axios-js.com/zh-cn/docs/

前后端交互约定

在本项目中，前后端交互统一使用 application/json;charset=UTF-8 的请求方式，后端返回对象统一为如下格式

export interface ResponseBody<T = any> {
    status: boolean,	// 业务处理状态，true表示正常，false表示异常
    code: string		// 业务处理状态码
    message: string,	// 提示信息
    data?: T			// 业务处理返回数据
}

安装

yarn add axios

创建Axios实例

在 src 目录下创建 http 目录，http 请求相关的文件都放置于该目录

创建 axios.ts 文件，用于定义 axios

// axios.ts
const instance: AxiosInstance = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 60000,
    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
})

其中，import.meta.env.VITE_APP_BASE_API 是 .env 中配置的环境变量，不同环境使用不同的请求地址

拦截器

通过 instance.interceptors.request.use 实现前置拦截器，发起请求前执行，用于对请求对象进行加工处理。

下面这段代码主要做的事情就是将 token 设置到请求头中。

// axios.ts
async function requestHandler(config: InternalAxiosRequestConfig & RequestConfigExtra): Promise<InternalAxiosRequestConfig> {
    if (config.modulePrefix) {
        config.url = config.modulePrefix + config.url
    }
    const token = useAuthorization()
    if (token.value && config.token !== false) {
        config.headers.set("Authorization", token.value)
    }
    console.log("execute http request：" + config.url)
    return config
}

instance.interceptors.request.use(requestHandler)

RequestConfigExtra 为自定义参数，在本项目中定义如下，可根据需要自行扩展。

export interface RequestConfigExtra {
    // 模块前缀
    modulePrefix?: string,
    // 发起请求时，是否需要在请求头中附加 token
    token?: boolean,
    // 成功处理函数，默认为 false，如果为 false，则什么都不做，如果为 true，则自动提示成功信息，如果为 Function，则自定义处理结果
    success?: boolean | ((response: ResponseBody<any>) => void),
    // 失败处理函数，默认为 true，如果为 false，则什么都不做，如果为 true，则自动提示失败信息，如果为 Function，则自定义处理结果
    error?: boolean | ((response: ResponseBody<any>) => void),
}

通过 instance.interceptors.response.use 实现后置拦截器，对后端返回数据进行处理。

function responseHandler(response: any): ResponseBody<any> | AxiosResponse<any> | Promise<any> | any {
    return response.data
}

function errorHandler(errorInfo: AxiosError): Promise<any> {
    if (errorInfo.response) {
        const { data, status, statusText } = errorInfo.response as AxiosResponse<ResponseBody>
        if (status === 401) {
            const token = useAuthorization()
            token.value = null
            message.error(data?.message || statusText)
            router.push({path: '/login', query: { 
                redirect: router.currentRoute.value.fullPath
            }})
        } else {
            message.error(data?.message || statusText)
        } 
    }
    return Promise.reject(errorInfo)
}

instance.interceptors.response.use(responseHandler, errorHandler)

errorHandler 方法对系统异常进行了统一处理，如果后端返回的 status 不是 200，则会执行该处理方法，如果返回 401，表示没有通过登录鉴权，自动跳转登录页，如果是其它异常码，则提示错误信息。

封装请求方法

这里对 restful 常用的四种请求方式进行进一步的封装

// axios.ts
function instancePromise<R = any, T = any>(options: AxiosRequestConfig<T> & RequestConfigExtra): Promise<ResponseBody<R>> {
    return new Promise((resolve, reject) => {
        instance.request<any, ResponseBody<R>>(options)
            .then((res) => {
                try {
                    resolve(responseBodyHandle(res, options))
                } catch (err) {
                    reject(err || new Error('response handle error!'))
                }
            })
            .catch((e: Error | AxiosError) => {
                reject(e)
            })
    })
}

export function doGet<R = any, T = any>(url: string, params?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        params,
        method: RequestEnum.GET,
        ...config,
    }
    return instancePromise<R, T>(options)
}

export function doPost<R = any, T = any>(url: string, data?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        data,
        method: RequestEnum.POST,
        ...config,
    }
    return instancePromise<R, T>(options)
}

export function doPut<R = any, T = any>(url: string, data?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        data,
        method: RequestEnum.PUT,
        ...config,
    }
    return instancePromise<R, T>(options)
}

export function doDelete<R = any, T = any>(url: string, data?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        data,
        method: RequestEnum.DELETE,
        ...config,
    }
    return instancePromise<R, T>(options)
}

业务异常处理

在拦截器中，我们对系统异常进行了统一处理，在实际项目中，更多的情况是前端请求没有通过后端的业务校验，后端返回错误信息，前端进行提示。

创建一个业务异常类

export class ResponseBodyError extends Error {
    code: string
    message: string
    cause: any

    constructor({ code, message, cause }: { code: string, message: string, cause?: any }) {
        super();
        this.code = code;
        this.message = message;
        this.cause = cause
    }
}

实现业务异常统一处理，通过在请求时定义 RequestConfigExtra 中的参数来实现对后端返回结果的提示。

比如：查询请求，设置为 {success:false, error: true}，如果请求失败，提示错误信息，如果请求成功，不作处理。业务请求，设置为 {success: true, error: true}，如果请求失败，提示错误信息，如果处理成功，提示操作成功。

function responseBodyHandle<R = any, T = any>(response: ResponseBody<R>, options: AxiosRequestConfig<T> & RequestConfigExtra): any {
    const { status, message:msg, code, data } = response
    const { success, error } = options
    if (status === true) {
        if (success === true) {
            message.success(msg ?? "操作成功")
        } else if (isFunction(success)) {
            success(response)
        }
        return response
    } else {
        if (isFunction(error)) {
            error(response)
        } else if (error !== false) {
            message.error(msg ?? "操作失败")
        }
        throw new ResponseBodyError({ code, msg })
    }
}

完整代码如下：

// axios.ts
/**
 * 创建 Axios 实例
 */
const instance: AxiosInstance = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 60000,
    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
})

/**
 * 前置拦截器
 */
async function requestHandler(config: InternalAxiosRequestConfig & RequestConfigExtra): Promise<InternalAxiosRequestConfig> {
    if (config.modulePrefix) {
        config.url = config.modulePrefix + config.url
    }
    const token = useAuthorization()
    if (token.value && config.token !== false) {
        config.headers.set(authorizationHeader, authorizationValue())
    }
    console.log("execute http request：" + config.url)
    return config
}

/**
 * 后置拦截器
 */
function responseHandler(response: any): ResponseBody<any> | AxiosResponse<any> | Promise<any> | any {
    return response.data
}

/**
 * 系统异常统一处理函数
 */
function errorHandler(errorInfo: AxiosError): Promise<any> {
    if (errorInfo.response) {
        const { data, status, statusText } = errorInfo.response as AxiosResponse<ResponseBody>
        if (status === 401) {
            const token = useAuthorization()
            token.value = null
            message.error(data?.message || statusText)
            router.push({path: '/login', query: { 
                redirect: router.currentRoute.value.fullPath
            }})
        } else {
            message.error(data?.message || statusText)
        } 
    }
    return Promise.reject(errorInfo)
}

instance.interceptors.request.use(requestHandler)
instance.interceptors.response.use(responseHandler, errorHandler)

/**
 * 业务异常统一处理函数
 */
function responseBodyHandle<R = any, T = any>(response: ResponseBody<R>, options: AxiosRequestConfig<T> & RequestConfigExtra): any {
    const { status, message:msg, code, data } = response
    const { success, error } = options
    if (status === true) {
        if (success === true) {
            message.success(msg ?? "操作成功")
        } else if (isFunction(success)) {
            success(response)
        }
        return response
    } else {
        if (isFunction(error)) {
            error(response)
        } else if (error !== false) {
            message.error(msg ?? "操作失败")
        }
        throw new ResponseBodyError({ code, msg })
    }
}

function instancePromise<R = any, T = any>(options: AxiosRequestConfig<T> & RequestConfigExtra): Promise<ResponseBody<R>> {
    return new Promise((resolve, reject) => {
        instance.request<any, ResponseBody<R>>(options)
            .then((res) => {
                try {
                    resolve(responseBodyHandle(res, options))
                } catch (err) {
                    reject(err || new Error('response handle error!'))
                }
            })
            .catch((e: Error | AxiosError) => {
                reject(e)
            })
    })
}

export function doGet<R = any, T = any>(url: string, params?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        params,
        method: RequestEnum.GET,
        ...config,
    }
    return instancePromise<R, T>(options)
}

export function doPost<R = any, T = any>(url: string, data?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        data,
        method: RequestEnum.POST,
        ...config,
    }
    return instancePromise<R, T>(options)
}

export function doPut<R = any, T = any>(url: string, data?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        data,
        method: RequestEnum.PUT,
        ...config,
    }
    return instancePromise<R, T>(options)
}

export function doDelete<R = any, T = any>(url: string, data?: T, config?: AxiosRequestConfig & RequestConfigExtra): Promise<ResponseBody<R>> {
    const options = {
        url,
        data,
        method: RequestEnum.DELETE,
        ...config,
    }
    return instancePromise<R, T>(options)
}
死牛胖子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios 全局异常捕获处理
壁咚
02-18 4430
对 axios 请求全局做处理， 期望对请求返回异常的情况做统一封装处理 。 interceptors.response.use
统一异常
qq_18671803的博客
09-04 539
目标：我们想让异常结果也显示为统一的返回结果对象，并且统一处理系统的异常信息，那么需要进行统一异常处理。 1、创建统一异常处理器 guigu-common中创建exception包，创建统一异常处理器类UnifiedExceptionHandler @Slf4j @Component //Spring容易自动管理 @RestControllerAdvice //在controller层添加通知。如果使用@ControllerAdvice，则方法上需要添加@ResponseBody public c
使用 Axios 处理 AxiosError 的三种常见方法
最新发布
笔记、经验、日常分享
04-11 1840
总结了三种常见的使用 Axios 处理 AxiosError 的方法，解决使用axios处理请求的时候错误处理的问题。
axios二次封装及拦截处理及统一错误处理
ABC_efg123456的博客
08-19 1668
小白入门vue的坎，实际开发中axios都会进行二次封装再使用，主要是为了网络请求拦截进行权限验证。 包结构如下 utils的request.js是对axios的二次封装处理 api是放使用网络接口的请求 view是放视图层即页面 直接看demo,注释都描述清楚了 request.js import axios from 'axios' import { Message } from 'element-ui'; const baseURL = { /* *把网络请求地址路径提取出来的优
如何处理Vue应用程序中的错误和异常情况？
2301_77795034的博客
05-30 1762
首先，我们需要知道的是，在Vue中，错误和异常情况是两个不同的概念。在try语句块中，我们会编写可能抛出异常的代码，如果在执行过程中出现了异常，就会跳转到catch语句块中。在Vue应用程序中，我们可以通过编写单元测试来测试代码的各种情况，并确保代码在各种边界情况和错误处理中能够正确地工作。在Vue应用程序中，可以通过代码审查来发现代码中的错误和异常情况，以及提高代码的质量和可维护性。处理Vue应用程序中的错误和异常情况是开发中非常重要的一环，但是对于新手来说，这往往是一个比较棘手的问题。
前端 Vue3 如何进行全局异常处理？
黑马程序员官方博客
05-17 1944
要在Vue3中处理全局异常，可以使用Vue实例提供的errorHandler函数。此函数将捕获在组件生命周期期间发生的任何未处理错误，并允许我们在集中位置处理它们。在errorHandler函数中，可以以任何我们认为合适的方式处理错误。可以将其记录到控制台，发送到服务器或向用户显示错误消息。此外，我们还可以使用globalProperties函数将errorHandler函数添加到全局Vue对象中。这将允许我们从应用程序中的任何组件访问errorHandler函数。
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
Vue后台管理系统实现权限控制
05-17
基于Vue和element-ui组件库搭建的一个后台管理系统。主要讲的是关于后台管理系统权限控制问题，包括：菜单控制、界面控制、按钮控制、请求和响应控制。
vue3 vite element-plus axios windicss 后台管理系统学习.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
vue3使用element-plus搭建后台管理系统---菜单管理
vue3+电商后台管理系统+elementplus+axios
07-04
使用vue3完成的电商后台管理系统，前后端分离，通过elementplus组件，axios发送请求，vue-router实现路由导航，实现了商品管理，订单管理，权限管理，用户管理等页面
axios请求封装和异常统一处理
weixin_34365417的博客
01-12 907
当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上...
异常统一处理（springboot）
m14526的博客
10-05 226
当我们访问页面时，由于各种人工或系统出错导致返回一个错误页面Whitelabel Error Page，这与业务逻辑并不契合，我们不知道他错误的原因是什么，概念模糊。
vue3.0 axios 请求统一处理配置，后端可以使用getParamter接收参数，也可以直接注入(仿ajax请求)
aaajavac的博客
12-02 525
第一次搭建vue项目，对于vue默认的请求方式axios的配置还不是很熟，这里记录一下： 新建http.js import axios from 'axios' const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间 // axios.defaults.withCredentials = true; /* * @param response 返回数据列表 */...
一种Vue应用程序错误/异常处理机制
油墨香^-^的博客
06-25 637
现在构建前端应用程序不像以前那么简单，现在，应用程序更加复杂和多样。这就需要在构建前端应用程序的时候考虑很多，错误/异常处理是最重要的方面之一。在应用程序中拥有良好的错误处理机制可以带来很多的好处，如下： 良好的错误处理机制可以避免应用程序在出现未处理的异常时崩溃 在生产环境下，可以轻松地存储或者跟踪错误记录日志，以便异常的处理 可以统一处理错误信息，例如在不破坏应用程序交互的情况下，更改错误信息展示UI 有助于改善用户体验 在前端应用程序中，最常见的错误/异常类型可
axios 网络异常重试
guxuehua的博客
10-09 2705
axios网络异常重试机制
axios 发出的 请求中，关于异常的捕获，与处理
norang的博客
09-06 5276
这里说，触发catch有三种情况。 1、成功发出了请求，但是返回的响应中状态码不是 2XX。 2、成功发出了请求，但是没有响应。 3、发不出请求的错误配置。 axios.post("/checkitem/page.do",param).then((resp)=>{ console.log(resp.data); this.dataList=resp.data.rows;
axios 拦截封装，全局统一处理异常
老愚公的博客
08-07 5180
封装 axios 以更好的适应现有业务!! 所有接口请求均应通过此方法来实现。!! 统一处理：Android平台 cookie 不存在情况 统一处理：错误提示和错误上报 统一处理：双平台（Android | IOS）netHeader import { Platform } from 'react-native'; import axios from 'axios'; import lodash ...
Vue项目统一错误处理
热门推荐
qq_38937669的博客
12-31 1万+
统一错误处理（错误兜底）是一款好产品的基本配置。缺乏错误兜底的程序通常表现为： 点击某个操作，出错之后，界面上就反应 加载框一直转啊转，客户一脸迷茫的等待 给人非常差的用户体验。其实最简单的处理就是给个提示，客户看到提示之后反馈问题，程序员把bug修掉就好了。具体怎么做呢？ Vue项目中主要的错误来源包括： 后端接口错误, 400, 404, 500常见。这个时候我们需要在axio中做统一处理。 vue代码中本身逻辑错误，这个时候设置Vue的全局错误处理就可以了。省去在代码中到处写catch语句块
vue-axios实现异步请求
09-27
Vue-axios是一种用于在Vue中进行异步请求的插件。它是在axios基础上封装的，可以方便地在Vue项目中使用。要使用vue-axios，你需要先安装axios和vue-axios...这样，你就可以在Vue项目中使用vue-axios来实现异步请求了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值