面试题：Vue网络请求异常时如何优雅地进行全局错误处理

Question

假设你正在开发一个大型Vue项目，有多个网络请求，当请求出现异常（如404、500错误等）时，要求能在全局统一处理这些错误，给出友好的提示信息，并且不影响其他请求的正常进行。请阐述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 使用axios的拦截器：在Vue项目中，通常使用axios进行网络请求。利用axios的拦截器可以在请求发送前和响应返回后进行统一的处理。
2. 全局捕获错误：在响应拦截器中捕获请求异常，根据不同的HTTP状态码给出友好的提示信息。
3. 不影响其他请求：每个请求的异常处理是独立的，捕获异常后不进行抛出，而是进行相应提示处理，从而不影响其他请求。

关键代码示例

1. 安装并引入axios：

   npm install axios
   

   在main.js中引入：

   import axios from 'axios'
   Vue.prototype.$http = axios
   

2. 配置axios拦截器：

   axios.interceptors.response.use(
     response => {
       return response
     },
     error => {
       const { response } = error
       if (response) {
         switch (response.status) {
           case 404:
             console.error('请求的资源不存在')
             break
           case 500:
             console.error('服务器内部错误')
             break
           default:
             console.error('其他错误', response.status)
         }
       }
       return Promise.reject(error)
     }
   )
   

上述代码在响应拦截器中，当请求出现异常时，根据不同的HTTP状态码在控制台输出友好提示信息，同时将错误继续通过Promise.reject()返回，以不影响其他请求。实际项目中，可以使用类似Element UI的Message组件来显示友好的提示信息给用户，例如：

import { Message } from 'element-ui'
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    const { response } = error
    if (response) {
      switch (response.status) {
        case 404:
          Message.error('请求的资源不存在')
          break
        case 500:
          Message.error('服务器内部错误')
          break
        default:
          Message.error('其他错误' + response.status)
      }
    }
    return Promise.reject(error)
  }
)