Vue中如何全局设置axios的错误处理？

在Vue中全局设置axios的错误处理，你可以创建一个axios实例并在Vue的原型上挂载，以便所有组件都能访问。首先安装axios库，然后在main.js或global.js这样的入口文件中进行设置。这里是一个简单的例子：

import axios from 'axios';
import Vue from 'vue';

const service = axios.create({
  baseURL: process.env.BASE_API, // API的URL base
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    Authorization: localStorage.getItem('token') || '',
  },
});

// 全局错误处理
service.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response && error.response.status) {
      switch (error.response.status) {
        case 401: // 未授权
          Vue.prototype.$router.push({ name: 'login' }); // 跳转到登录页面
          break;
        case 404: // 找不到资源
          this.errorMessage = '请求失败，请稍后再试.';
          break;
        // 添加更多自定义错误处理
        default:
          this.errorMessage = '请求失败，请联系管理员!';
      }
    } else {
      console.error('未知错误', error); // 记录非网络错误
    }

    return Promise.reject(error.response.data || error.message);
  }
);

Vue.prototype.$http = service; // 在Vue原型上暴露axios服务

export default service;

这样，每个Vue组件就可以通过`this.$http`来发起请求，并且错误会被统一处理。