axios request 封装

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;

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容