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

简介

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

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

方法一

创建统一异常处理模块

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

// errorHandler.js

export 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('发生错误');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

使用axios拦截器处理异常

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

// main.js

import 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这个拦截器中，我们通过 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这个例子中，我们在点击按钮时调用一个方法来发送请求使用功能。在这个方法中，我们使用了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('请求出错');
  }
}
1
2
3
4
5
6
7
8
9
10

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

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

import errorHandler from './utils/errorHandler';

Vue.config.errorHandler = errorHandler;
1
2
3

在网络请求中捕获异常

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

methods: {
  async fetchData() {
    try {
      // 发起网络请求
      const response = await axios.get('/api/data');
      // 处理响应数据
      console.log(response.data);
    } catch (error) {
      // 将异常传递给全局异常处理函数
      Vue.config.errorHandler(error);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

通过以上步骤，我们可以在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);
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

import errorHandlerPlugin from './plugins/errorHandler';

Vue.use(errorHandlerPlugin);
1
2
3

在网络请求中捕获异常

在网络请求的地方（例如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);
    }
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13

通过以上步骤，我们同样可以在Vue项目中设置全局的异常处理。当后端返回403异常时，前端会统一处理并按照我们定义的方式进行提示，例如弹窗提示用户无权限使用此功能。这样可以提升用户体验，让用户清楚地知道自己无权限使用某个功能。

总结

其他异常也会被捕获并处理，可以根据实际需求进行相应的处理逻辑。使用插件方式的好处是可以更好地封装全局异常处理逻辑，并且在多个组件中共享。

需要注意的是，异常处理模块可以根据具体的需求进行扩展和修改。例如，可以根据不同的错误类型进行不同的处理逻辑，或者将错误信息展示在页面的某个特定位置。

希望本文对你理解Vue项目中如何设置全局异常处理有所帮助！

大家还有哪些方法，大家遇到类似问题，欢迎评论区讨论，如有错误之处，敬请留言!