封装axios，增加动态请求头

背景：
项目启动后，需要调接口查询请求头信息，然后所有的业务接口请求时添加请求头。此处特殊的是，请求头信息是调用接口动态查询的。请求头信息如果是静态的，可忽略此文章
原理：
所有业务请求时，先查询缓存（localStorage）中是否存在请求头数据，1、如果存在，request.headers = ‘请求头’。2、如果不存在，调接口查询请求头，查询后先存到缓存中， 再设置请求头。系统使用中如果缓存被清，也不影响。

src/api/demoApi.ts
requestHeader导出api

import { api } from '@/utils/requestHeader'

/** 查询体检类型列表 */
const findBusinessType = (params: any) => {
  return api.get('/businessType/findBusinessType', { params });
};
/** 新增 */
const savePeisType = (params: any) => {
  return api.post('/businessType/saveBusiness', params);
};
/** 修改 */
const updatePeisType = (params: any) => {
  return api.post('/businessType/updateBusinessType', params);
};
/** 删除 */
const deletePeisType = (params: any) => {
  return api.post('/businessType/deleteBusiness', params);
};

export const peisTypeApi:any = {
  findBusinessType,
  deletePeisType,
  savePeisType,
  updatePeisType
};

src/utils/requestHeader.ts
接口封装

import axios from 'axios';
import { message } from 'ant-design-vue';

const configApi = axios.create({ baseURL: import.meta.env.VITE_PEIS_APP_API });
/** 获取配置 */
const findPeisConfig = (params: any) => {
  return configApi.post('/peisConfig/findPeisSysConfig', params);
};
/** 根据科室id集合查询科室信息 */
const getHisDepts = (params: any) => {
  return configApi.post('/api/dept/findDeptsByIds/', params);
};

// 查询请求头1：科室隔离开关
const getIsolationDeptConfig = () => {
  return new Promise((resolve: any) => {
    if (localStorage['PeisDeptIsolation_OpenFlag']) {
      resolve(JSON.parse(localStorage['PeisDeptIsolation_OpenFlag']));
      return;
    }
    findPeisConfig({ configCode: 'PeisDeptIsolation', pageNum: 1, pageSize: 100 })
      .then((res: any) => {
        if (res && res.list) {
          localStorage.setItem('PeisDeptIsolation_OpenFlag', (res.list[0].peisSysConfigContent === '1').toString());
          resolve(res.list[0].peisSysConfigContent === '1');
        }
      })
      .catch(() => {
        resolve(false);
        localStorage.setItem('PeisDeptIsolation_OpenFlag', 'false');
      });
  });
};
// 查询请求头2：查询当前科室是否有体检科权限
const getIsPeisDept = () => {
  return new Promise((resolve: any) => {
    if (localStorage['PeisDeptIsolation_IsPeis']) {
      resolve(JSON.parse(localStorage['PeisDeptIsolation_IsPeis']));
      return;
    }
    getHisDepts([JSON.parse(sessionStorage.selectedSystem).deptId])
      .then((res: any) => {
        localStorage.setItem('PeisDeptIsolation_IsPeis', res[0].categoryIdList.some((item: any) => item === '15').toString());
        resolve(res[0].categoryIdList.some((item: any) => item === '15'));
      })
      .catch(() => {
        resolve(false);
        localStorage.setItem('PeisDeptIsolation_IsPeis', 'false');
      });
  });
};

const setStorageHeaders = () => {
  getIsolationDeptConfig();
  getIsPeisDept();
};

/* 封装携带请求头的api */
const api = axios.create({
  baseURL: import.meta.env.VITE_PEIS_APP_API
});
// 请求拦截 增加科室隔离所需的请求头
api.interceptors.request.use(
  async (request: any) => {
    try {
      let isolationDeptConfig: any;
      let isPeisDept: any;
      if (localStorage['PeisDeptIsolation_OpenFlag']) {
        isolationDeptConfig = JSON.parse(localStorage['PeisDeptIsolation_OpenFlag']);
      } else {
        isolationDeptConfig = await getIsolationDeptConfig();
      }
      if (localStorage['PeisDeptIsolation_IsPeis']) {
        isPeisDept = JSON.parse(localStorage['PeisDeptIsolation_IsPeis']);
      } else {
        isPeisDept = await getIsPeisDept();
      }
      if (isolationDeptConfig) {
        Object.entries({
          isolationdeptconfig: isolationDeptConfig,
          ispeisdept: isPeisDept
        }).forEach(([key, value]) => (request.headers[key] = value));
      }
    } catch (err) {
      message.error(`科室隔离配置查询失败：${err}`);
    }
    return request;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);
/* 科室隔离需求版本之前 项目中所用到的原始api, 此处导出 用时自取 */
const peisApi = axios.create({ baseURL: import.meta.env.VITE_PEIS_APP_API });

/* 51版本科室隔离需求之后使用api，没做科室隔离需求的时候使用peisApi ，两者区别在于api多了两个header */
export { setStorageHeaders, api, peisApi, getIsolationDeptConfig, getIsPeisDept };

封装完后，需要在mian.js中先调用setStorageHeaders（查询请求头信息）

setStorageHeaders(); //查询请求头信息

效果如图：