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

文章目录

简介
方法一
- 创建统一异常处理模块
- 使用axios拦截器处理异常
- 在页面中使用异常处理
方法二
- 创建全局异常处理函数
- 在main.js中配置全局异常处理
- 在网络请求中捕获异常
方法三
- 创建全局异常处理插件
- 在main.js中注册全局异常处理插件
- 在网络请求中捕获异常
总结

简介

在Vue项目中，通常会遇到一些后端返回的异常，例如返回403错误表示无权限访问某个功能。对于一些共性的状态码，一个接口一次异常捕获就显得非常繁琐。为了提升用户体验，我们可以在前端统一处理这些异常，并给用户友好的提示信息。本文将详细介绍如何在Vue项目中设置全局异常处理。

本文将介绍几种处理方式，可以通过设置全局的异常处理来统一处理后端返回的异常。

方法一

创建统一异常处理模块

首先，我们需要创建一个统一的异常处理模块，用来处理所有的异常情况。可以在src目录下创建一个utils文件夹，并在其中创建一个 errorHandler.js 文件。

// errorHandler.jsexport default function errorHandler(error) {// 根据不同的错误类型进行处理if (error.response) {// 后端返回错误const { status } = error.response;if (status === 403) {// 处理权限不足的情况alert('无权限使用此功能');} else if (status === 500) {// 处理服务器内部错误alert('服务器内部错误');} else {// 处理其他错误alert('请求错误');}} else if (error.request) {// 请求发送失败alert('请求发送失败');} else {// 其他错误alert('发生错误');}
}

在这个异常处理模块中，我们首先判断异常的类型，如果是后端返回的错误，我们根据错误的状态码进行不同的处理，例如403错误表示权限不足，500错误表示服务器内部错误。如果是请求发送失败，则提示请求发送失败。其他情况下，我们给出一个通用的错误提示。

使用axios拦截器处理异常

接下来，我们需要通过axios拦截器来捕获所有的异常，并调用统一的异常处理模块进行处理。在Vue项目中，可以在 main.js 文件中设置axios的拦截器。

// main.jsimport Vue from 'vue';
import axios from 'axios';
import errorHandler from './utils/errorHandler';// 设置axios的拦截器
axios.interceptors.response.use(response => response,error => {errorHandler(error);return Promise.reject(error);}
);Vue.prototype.$http = axios;

在这个拦截器中，我们通过 axios.interceptors.response.use 方法设置了一个响应拦截器，用来处理所有的响应异常。如果发生异常，我们调用之前创建的异常处理模块进行处理，并通过 Promise.reject 方法将异常继续传递下去。

在页面中使用异常处理

最后，我们可以在具体的页面中使用异常处理。例如，在一个需要权限的功能页面，我们可以通过try-catch语句来捕获异常并进行处理。

<template><div><button @click="handleClick">点击使用功能</button></div>
</template><script>
export default {methods: {handleClick() {try {// 发送请求使用功能} catch (error) {errorHandler(error);}}}
}
</script>

在这个例子中，我们在点击按钮时调用一个方法来发送请求使用功能。在这个方法中，我们使用了try-catch语句来捕获可能发生的异常，并通过之前创建的异常处理模块进行处理。

方法二

创建全局异常处理函数

在Vue项目的 src 目录下，创建一个 utils 文件夹，并在其中创建一个 errorHandler.js 文件。在该文件中，编写全局异常处理函数。

export default function errorHandler(error) {if (error.response && error.response.status === 403) {// 处理403异常，例如提示用户无权限使用此功能console.log('无权限使用此功能');// 在此处可以使用Vue的弹窗组件显示提示信息} else {// 处理其他异常，例如提示用户请求出错console.log('请求出错');}
}

在main.js中配置全局异常处理

打开 src/main.js 文件，在文件开头的位置引入全局异常处理函数，并在Vue实例中配置全局异常处理。

import errorHandler from './utils/errorHandler';Vue.config.errorHandler = errorHandler;

在网络请求中捕获异常

在网络请求的地方（例如Vue组件的方法中），使用 try/catch 语句来捕获异常，并将异常传递给全局异常处理函数进行处理。

methods: {async fetchData() {try {// 发起网络请求const response = await axios.get('/api/data');// 处理响应数据console.log(response.data);} catch (error) {// 将异常传递给全局异常处理函数Vue.config.errorHandler(error);}}
}

通过以上步骤，我们可以在Vue项目中设置全局的异常处理。当后端返回403异常时，前端会统一处理并按照我们定义的方式进行提示，例如弹窗提示用户无权限使用此功能。其他异常也会被捕获并处理，可以根据实际需求进行相应的处理逻辑。

方法三

还有一种更加简洁的方式来设置全局异常处理，使用Vue的插件机制。下面是基于这种方式的详细解释：

创建全局异常处理插件

在 src 目录下，创建一个 plugins 文件夹，并在其中创建一个 errorHandler.js 文件。在该文件中，编写全局异常处理插件。

const errorHandler = (error, vm, info) => {if (error.response && error.response.status === 403) {// 处理403异常，例如提示用户无权限使用此功能console.log('无权限使用此功能');// 在此处可以使用Vue的弹窗组件显示提示信息} else {// 处理其他异常，例如提示用户请求出错console.log('请求出错');}
};export default {install(Vue) {Vue.config.errorHandler = errorHandler;Vue.prototype.$throw = (error) => errorHandler(error, this);},
};

在main.js中注册全局异常处理插件

在 src/main.js 文件中，引入全局异常处理插件，并使用 Vue.use() 方法注册插件。

import errorHandlerPlugin from './plugins/errorHandler';Vue.use(errorHandlerPlugin);

在网络请求中捕获异常

在网络请求的地方（例如Vue组件的方法中），使用 try/catch 语句来捕获异常，并通过 this.$throw() 方法将异常传递给全局异常处理插件进行处理。

methods: {async fetchData() {try {// 发起网络请求const response = await axios.get('/api/data');// 处理响应数据console.log(response.data);} catch (error) {// 将异常传递给全局异常处理插件this.$throw(error);}},
},