美文网首页
axios request 封装

axios request 封装

作者: 泛酸的桂花酒 | 来源:发表于2023-12-28 10:43 被阅读0次
    import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
    import { Session, Local } from '/@/utils/storage';
    import { useMessage, useMessageBox } from '/@/hooks/message';
    import qs from 'qs';
    import other from './other';
    import errorCode from './errorCode';
    import { useThemeConfig } from '/@/stores/themeConfig';
    const storesThemeConfig = useThemeConfig();
    const { themeConfig } = storeToRefs(storesThemeConfig);
    
    /**
     * 创建并配置一个 Axios 实例对象
     */
    const service: AxiosInstance = axios.create({
        baseURL: import.meta.env.VITE_API_URL,
        timeout: 50000, // 全局超时时间
    });
    
    /**
     * Axios请求拦截器,对请求进行处理
     * 1. 序列化get请求参数
     * 2. 统一增加Authorization和TENANT-ID请求头
     * 3. 自动适配单体、微服务架构不同的URL
     * @param config AxiosRequestConfig对象,包含请求配置信息
     */
    service.interceptors.request.use(
        (config: AxiosRequestConfig) => {
            // 对get请求参数进行序列化
            if (config.method === 'get') {
                // @ts-ignore 使用qs库来序列化查询参数
                config.paramsSerializer = (params: any) => {
                    return qs.stringify(params, { arrayFormat: 'repeat' });
                };
            }
    
            // 统一增加Authorization请求头, skipToken 跳过增加token
            const token = Session.getToken();
            if (token && !config.headers?.skipToken) {
                config.headers![CommonHeaderEnum.AUTHORIZATION] = `Bearer ${token}`;
            }
    
            // 统一增加TENANT-ID请求头
            const tenantId = Session.getTenant();
            if (tenantId) {
                config.headers![CommonHeaderEnum.TENANT_ID] = tenantId;
            }
    
            // 请求报文加密
            if (config.headers![CommonHeaderEnum.ENC_FLAG]) {
                const enc = other.encryption(JSON.stringify(config.data), import.meta.env.VITE_PWD_ENC_KEY);
                config.data = {
                    encryption: enc,
                };
            }
    
            // 自动适配单体和微服务架构不同的URL
            config.url = other.adaptationUrl(config.url);
    
            // 处理完毕,返回config对象
            return config;
        },
        (error) => {
            // 对请求错误进行处理
            return Promise.reject(error);
        },
    );
    
    /**
     * 响应拦截器处理函数
     * @param response 响应结果
     * @returns 如果响应成功,则返回响应的data属性;否则,抛出错误或者执行其他操作
     */
    const handleResponse = (response: AxiosResponse<any>) => {
        if (response.data.code === 1) {
            throw response.data;
        }
    
        // 针对密文返回解密
        if (response.data.encryption) {
            const originData = JSON.parse(other.decryption(response.data.encryption, import.meta.env.VITE_PWD_ENC_KEY));
            response.data = originData;
            return response.data;
        }
    
        // 206针对当点登录
        if (response.status === 206) {
            return response;
        } else {
            return response.data;
        }
    };
    
    /**
     * 添加 Axios 的响应拦截器,用于全局响应结果处理
     */
    service.interceptors.response.use(handleResponse, (error) => {
        const status = Number(error.response.status) || 200;
        if (status === 424) {
            useMessageBox()
                .confirm('令牌状态已过期,请点击重新登录')
                .then(() => {
                    themeConfig.value.isLockScreen = false;
                    themeConfig.value.lockScreenTime = 30;
                    // 将最新的主题配置保存到本地存储中
                    themeConfig.value.isDrawer = false;
                    Local.set('themeConfig', themeConfig.value);
                    Session.clear(); // 清除浏览器全部临时缓存
                    window.location.href = '/'; // 去登录页
                });
            return;
        }
    
        if (status !== 200) {
            const errMsg = errorCode[status] || errorCode['default'];
            useMessage().error(errMsg);
        }
    
        return Promise.reject(error.response.data);
    });
    
    // 常用header
    export enum CommonHeaderEnum {
        'TENANT_ID' = 'TENANT-ID',
        'ENC_FLAG' = 'Enc-Flag',
        'AUTHORIZATION' = 'Authorization',
    }
    
    // 导出 axios 实例
    export default service;
    
    

    相关文章

      网友评论

          本文标题:axios request 封装

          本文链接:https://www.haomeiwen.com/subject/gtwdndtx.html