vue中封装axios

在 Vue 中使用 Axios 通常需要进行封装，以方便在整个应用程序中使用。下面是一个简单的封装 Axios 的示例：

1. 在 main.js 中引入 Axios 并将其挂载到 Vue 的原型上。

import axios from 'axios';

Vue.prototype.$http = axios;

2. 创建一个 axios.js 文件，在该文件中封装 Axios。

import axios from 'axios';

// 创建一个 Axios 实例
const http = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
});

// 添加请求拦截器
http.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

export default http;

3. 在组件中使用封装的 Axios。

import http from '@/utils/axios';

export default {
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      http.get('/users').then(res => {
        console.log(res);
      });
    }
  }
}

在这个示例中，我们使用 Axios 创建了一个实例，并添加了请求和响应拦截器。在组件中，我们只需要引入封装后的 Axios 并使用它来发送请求即可。这种封装方式能够提高代码的可读性和可维护性，同时也能够方便地统一处理请求和响应。