vue3 axios 优秀封装

Vue3中使用Axios作为HTTP客户端是一种常见的做法，因为它轻量级、易于集成，并且与JavaScript生态系统有很好的兼容性。为了提高开发效率和代码可维护性，对Axios进行优雅的封装是非常推荐的。一个优秀的封装通常包括以下几个方面：

1. **插件式设计**：将Axios封装成一个Vue的全局或局部插件，便于全局注册和按需引入。

import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from './vue-axios';

const app = createApp(App);
app.use(VueAxios, axios); // 使用时配置axios实例，如设置baseURL等

2. **响应拦截**：封装`request`和`response`拦截器，处理请求前的配置以及错误处理和响应数据的统一处理。

// vue-axios.js
export default {
  install(app, axiosInstance) {
    axiosInstance.interceptors.request.use(config => {
      // 添加默认配置，例如token验证
      config.headers.common['Authorization'] = getToken();
      return config;
    }, error => {
      return Promise.reject(error);
    });

    axiosInstance.interceptors.response.use(response => {
      return response.data; // 返回解析后的数据
    }, error => {
      handleError(error);
    });
  }
};

3. **响应转换**：提供统一的数据转换工具，将 Axios 返回的原始Promise对象转化为更符合 Vue 中 Promise 使用习惯的响应。

4. **API 容器**：创建一个单独的对象或模块来管理所有的 API 调用，提供命名空间并支持链式调用。

const api = {
  login({ username, password }) {
    return axios.post('/api/login', { username, password });
  },
  getUser(id) {
    return axios.get(`/api/users/${id}`);
  },
};

export default api;

5. **错误处理**：为异常情况提供统一的处理机制，比如全局统一提示，或者自定义具体的错误提示。

6. **异步组件加载**：当需要延迟加载某些依赖时，可以利用 Axios 的 promise特性来控制组件是否显示或隐藏。