Vue项目中有封装过axios吗？怎么封装的?

在 Vue 项目中封装 Axios 是一个非常普遍且重要的实践，它能显著提升代码的可维护性和开发效率。下面我为你梳理一套清晰、实用的封装方案。

🔧 核心封装步骤

1. 创建 Axios 实例与基础配置

首先，创建一个独立的 request.js文件（通常放在 src/utils/或 src/api/目录下），用于配置 Axios 实例。这样做可以隔离配置，避免污染全局设置。

javascript 复制代码

// src/utils/request.js
import axios from 'axios';
import { Message } from 'element-ui'; // 示例使用 Element UI 的消息提示

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取基础 API 地址
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

通过环境变量（如 VUE_APP_BASE_API）管理基础 URL，可以轻松区分开发、测试和生产环境。

2. 设置请求拦截器

请求拦截器在请求发出前执行，常用于添加全局需求，如自动注入用户令牌（Token）。

javascript 复制代码

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token'); // 从本地存储获取 token
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`; // 携带认证令牌
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

如果需要修改请求数据格式（例如，后端要求 application/x-www-form-urlencoded），可以在这里使用 qs库进行序列化。

3. 设置响应拦截器

响应拦截器在收到响应后执行，用于统一处理错误、过滤数据等。

go 复制代码

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么，例如根据后端约定结构处理
    const res = response.data;
    if (res.code === 200 || res.success) { // 假设业务成功码为200或success为true
      return res.data || res; // 返回实际需要的数据
    } else {
      // 处理业务逻辑错误，例如提示错误信息
      Message.error(res.message || 'Error');
      return Promise.reject(new Error(res.message || 'Error'));
    }
  },
  (error) => {
    // 对响应错误做点什么，例如处理HTTP状态码错误
    if (error.response) {
      switch (error.response.status) {
        case 401:
          Message.error('未授权，请登录');
          // 可跳转到登录页
          break;
        case 403:
          Message.error('拒绝访问');
          break;
        case 404:
          Message.error('请求的资源不存在');
          break;
        case 500:
          Message.error('服务器内部错误');
          break;
        default:
          Message.error(`请求错误: ${error.response.status}`);
      }
    } else {
      Message.error('网络错误，请检查您的连接');
    }
    return Promise.reject(error);
  }
);

4. 封装通用请求方法

为了方便使用，可以封装常用的 GET、POST 等方法。

dart 复制代码

// 封装请求函数
export const get = (url, params) => {
  return service.get(url, { params });
};

export const post = (url, data) => {
  return service.post(url, data);
};

export const put = (url, data) => {
  return service.put(url, data);
};

export const del = (url) => {
  return service.delete(url);
};

export default service;

5. 统一管理 API 接口

建议创建一个 api.js文件集中管理所有接口，便于维护。

dart 复制代码

// src/api/index.js
import { get, post } from '@/utils/request';

// 示例接口
export const getUserInfo = (params) => get('/user/info', params);
export const login = (data) => post('/auth/login', data);
export const updateProfile = (data) => put('/user/profile', data);

6. 在 Vue 组件中使用

在组件中，可以优雅地调用封装好的 API。

xml 复制代码

<script>
import { getUserInfo } from '@/api';

export default {
  data() {
    return {
      userData: null,
      isLoading: false
    };
  },
  methods: {
    async fetchUser() {
      this.isLoading = true;
      try {
        this.userData = await getUserInfo({ userId: 123 });
      } catch (error) {
        console.error('获取用户信息失败', error);
      } finally {
        this.isLoading = false;
      }
    }
  },
  mounted() {
    this.fetchUser();
  }
};
</script>

💡 封装的优势与最佳实践

通过上述封装，你获得了以下优势：

代码复用：避免了在每个组件中重复编写 Axios 配置和错误处理逻辑。
统一管理：便于修改全局配置，如基础 URL、超时时间。
高效维护：接口地址集中管理，后端接口变更时只需修改一处。
增强体验：可轻松集成加载状态、错误提示等，提升用户体验。

最佳实践建议：

环境配置 ：利用 .env文件管理不同环境的基础 URL 。
安全考虑：谨慎处理 Token 等敏感信息，考虑使用 HTTP-only Cookie 或更安全的存储方式。
取消请求：对于可能重复的请求，可使用 Axios 的 CancelToken 或 AbortController 来取消。

💎 总结

在 Vue 项目中封装 Axios 是一个提升项目质量和开发效率的关键步骤。核心在于通过拦截器 实现全局的请求/响应处理，并模块化地管理 API 接口。你可以根据项目规模和团队规范调整封装的复杂度。希望这份指南对你有帮助！如果你对某个具体细节（如如何与 Vuex 配合管理加载状态）有更多疑问，我们可以继续探讨。