美文网首页
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