模块化 Axios 实现指南：提高代码可维护性和可读性

模块化 Axios 可以通过以下步骤来实现：

创建一个 Axios 实例：可以在项目的某个地方创建一个 Axios 实例，例如在 src/api/request.js 文件中，通过导入 Axios 库和创建一个实例的方式来创建 Axios 实例。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置基本的请求 URL
  timeout: 5000, // 设置请求超时时间
  headers: { // 设置请求头
    'Content-Type': 'application/json'
  }
});

export default instance;

创建一个封装的请求模块：根据项目的需求，可以创建一个或多个封装的请求模块，例如在 src/api/user.js 文件中，通过导入 Axios 实例和封装请求方法的方式来创建请求模块。

import request from './request';

export function getUserInfo(id) {
  return request.get(`/user/${id}`);
}

export function updateUser(id, data) {
  return request.put(`/user/${id}`, data);
}

在需要使用请求的地方导入请求模块并使用：比如在某个组件中需要调用接口获取用户信息，可以导入请求模块并调用相关方法。

import { getUserInfo } from '@/api/user';

export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    this.getUserInfo(1);
  },
  methods: {
    getUserInfo(id) {
      getUserInfo(id)
        .then(response => {
          this.userInfo = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};

通过以上步骤，我们可以实现模块化的 Axios，将请求的配置和逻辑封装在一个模块中，使代码更加清晰和可维护。同时，Axios 实例的创建可以根据项目的需求进行配置，例如设置基本的请求 URL、请求超时时间以及请求头等。