VUE封装 axios 请求

在 Vue.js 开发中，封装 Axios 请求是一种常见的做法，通常是为了简化全局的 API 调用，避免在每个组件中都重复引入 Axios 并设置相同的配置。以下是创建一个简单的 Axios 封装实例：

import axios from 'axios';
import { MessageBox } from 'element-ui';

// 创建一个 Vue 插件
export default {
  install(Vue) {
    // 创建一个 Vue 实例的方法
    Vue.prototype.$axios = axios.create({
      baseURL: process.env.BASE_API, // 当前应用的基础URL
      timeout: 5000, // 设置默认超时时间
      headers: {
        'Content-Type': 'application/json', // 默认请求头
      },
    });

    // 添加全局错误处理
    Vue.prototype.$httpError = (error) => {
      if (error.response) {
        console.log(error.response.data);
        MessageBox.error(error.response.data.message || error.response.status);
      } else {
        console.error('未知错误', error);
      }
    };

    // 错误拦截器
    Vue.prototype.$axios.interceptors.response.use(
      response => response,
      error => {
        this.$httpError(error);
        return Promise.reject(error);
      }
    );

    // 请求拦截器
    Vue.prototype.$axios.interceptors.request.use(
      config => {
        // 在发送请求之前做些什么
        return config;
      },
      error => {
        // 对请求错误做些什么
        this.$httpError(error);
        return Promise.reject(error);
      }
    );
  },
};

通过这种方式，你在 Vue 组件中就可以像下面这样轻松地发送请求了：

methods: {
  fetchData() {
    this.$axios.get('/api/data').then(response => {
      // 处理成功响应
    }).catch(this.$httpError);
  }
}