Vue 中 axios 封装的最佳实践方案

在 Vue 项目开发中，axios 作为一个流行的 HTTP 库，被广泛用于发送 HTTP 请求。合理封装 axios 能够提高代码的可维护性、复用性，同时增强项目的健壮性。以下将详细介绍 Vue 中 axios 封装的最佳实践方案。

首先是基础封装。在项目根目录下创建一个 api 文件夹，并在其中新建一个 axios.js 文件。在这里引入 axios 并创建一个实例，设置基础 URL 和超时时间等通用配置。例如：

import axios from 'axios';
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000
});
export default service;

这样，所有的请求都将以 process.env.VUE_APP_BASE_API 作为基础路径，并且请求如果在 5 秒内没有响应，就会触发超时错误。

其次是请求拦截器和响应拦截器的设置。请求拦截器可以用于在请求发送前进行一些操作，如添加请求头。例如，在需要进行身份验证的项目中，可以添加 token 到请求头：

service.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

响应拦截器则用于处理响应数据，比如对通用的错误进行统一处理。当服务器返回错误状态码时，我们可以通过响应拦截器弹出提示框告知用户：

service.interceptors.response.use(response => {
    const { data } = response;
    if (data.code!== 200) {
        // 假设服务器返回的错误信息中有 code 字段表示状态码
        console.error('请求失败', data.message);
        return Promise.reject(new Error(data.message));
    }
    return data;
}, error => {
    console.error('网络错误', error);
    return Promise.reject(error);
});

最后是接口封装。在 api 文件夹下再创建不同模块的 API 文件，如 user.js、product.js 等。以 user.js 为例：

import service from './axios';
export const getUserInfo = () => service.get('/user/info');
export const login = data => service.post('/user/login', data);

通过这种方式，将具体的业务接口封装起来，在组件中使用时直接引入这些函数即可。例如在 Login.vue 组件中：

import { login } from '@/api/user';
export default {
    methods: {
        async handleLogin() {
            try {
                const res = await login(this.loginForm);
                console.log(res);
            } catch (error) {
                console.error(error);
            }
        }
    }
};

通过上述步骤，实现了 Vue 中 axios 的高效封装，让项目的 HTTP 请求管理更加清晰、便捷。