Vue 项目中封装 axios

在前端开发中，为了方便使用 axios 进行网络请求，通常会对其进行封装。以下是一个在 Vue 项目中封装 axios 的示例，包含请求拦截、响应拦截和错误处理等功能。

1. 安装 axios

首先，确保你已经安装了 axios。如果没有安装，可以使用以下命令进行安装：

npm install axios

2. 创建 axios 封装文件

在项目中创建一个名为 request.js 的文件，用于封装 axios。以下是一个示例代码：

import axios from 'axios';
import { ElMessage } from 'element-plus'; // 这里使用 ElementPlus 的消息提示，你可以根据自己的项目替换

// 创建 axios 实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url，根据环境变量配置
    timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么，例如添加 token
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        // 处理请求错误
        console.log(error); // 打印错误信息
        Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        // 根据返回的状态码进行相应处理
        if (res.code !== 200) {
            ElMessage({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            });
            // 例如，返回 401 状态码表示未登录，跳转到登录页面
            if (res.code === 401) {
                // 跳转到登录页面的逻辑
            }
            return Promise.reject(new Error(res.message || 'Error'));
        } else {
            return res;
        }
    },
    error => {
        // 处理响应错误
        console.log('err' + error); // 打印错误信息
        ElMessage({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        });
        return Promise.reject(error);
    }
);

export default service;

3. 使用封装后的 axios

在需要发送请求的地方引入封装后的 axios 实例，例如在组件中：

import request from '@/utils/request';

export default {
    methods: {
        async getData() {
            try {
                const response = await request.get('/api/data');
                console.log(response);
            } catch (error) {
                console.error(error);
            }
        }
    }
};

封装说明

• 创建实例：使用 axios.create() 方法创建一个 axios 实例，方便统一配置请求的基本信息，如 baseURL 和 timeout。
• 请求拦截器：在发送请求之前，可以对请求进行一些预处理，例如添加请求头、设置请求参数等。
• 响应拦截器：在接收到响应后，可以对响应进行统一处理，例如根据返回的状态码进行错误提示、跳转到登录页面等。
• 错误处理：在请求和响应过程中，如果出现错误，可以统一进行错误处理，提高代码的健壮性。

通过以上封装，可以提高代码的可维护性和复用性，同时也方便对请求进行统一管理。