import request from ‘/@/utils/request’;
export function fetchList(query?: Object) {return request({url: '/admin/audit/page',method: 'get',params: query,});
request.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { Session } from '/@/utils/storage';
import { useMessageBox } from '/@/hooks/message';
import qs from 'qs';
import other from './other';
import { ElMessage } from 'element-plus';/*** 创建并配置一个 Axios 实例对象*/
const service: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 100000, // 全局超时时间
});/*** Axios请求拦截器，对请求进行处理* 1. 序列化get请求参数* 2. 统一增加Authorization和TENANT-ID请求头* 3. 自动适配单体、微服务架构不同的URL* @param config AxiosRequestConfig对象，包含请求配置信息*/
service.interceptors.request.use((config: AxiosRequestConfig) => {// 对get请求参数进行序列化//console.log('统一处理')//console.log('config',config)if (config.method === 'get') {//console.log('get请求')//console.log(config.params)// @ts-ignore 使用qs库来序列化查询参数//项目所使用的axios版本paramsSerializer被定义成interface类型，以往的写法传的是function类型，无法生效config.paramsSerializer = {encode: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),serialize: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),};}// 统一增加Authorization请求头, skipToken 跳过增加tokenconst token = Session.getToken();if (token && !config.headers?.skipToken) {config.headers!['Authorization'] = `Bearer ${token}`;}// 统一增加TENANT-ID请求头const tenantId = Session.getTenant();if (tenantId) {config.headers!['TENANT-ID'] = tenantId;}// 自动适配单体和微服务架构不同的URLconfig.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) {if (response.data.msg && response.data.msg.startsWith('错误代码：40007')) {throw response.data;}if (response.data.msg) {ElMessage.error(response.data.msg);} else if (response.data.data && typeof response.data.data === 'string') {ElMessage.error(response.data.data);}throw response.data;}return response.data;
};/*** 添加 Axios 的响应拦截器，用于全局响应结果处理*/
service.interceptors.response.use(handleResponse, (error) => {const status = Number(error.response.status) || 200;if (status === 500 || status === 400) {if (error.response.data.msg && error.response.data.msg.startsWith('错误代码：40132')) {} else if (error.response.data.msg && error.response.data.msg.startsWith('错误代码：43004')) {} else {ElMessage.error(error.response.data.msg);}}if (status === 424) {useMessageBox().confirm('令牌状态已过期，请点击重新登录').then(() => {Session.clear(); // 清除浏览器全部临时缓存window.location.href = '/'; // 去登录页return;});}return Promise.reject(error.response.data);
});// 导出 axios 实例
export default service;
代码说明：
当调用 fetchList 函数时，会执行以下步骤：
调用 request 方法
export function fetchList(query?: Object) {return request({url: '/admin/audit/page',method: 'get',params: query,});
}
在这个函数中，它调用了名为 request 的函数，同时传递了一个包含了请求相关信息的对象，包括请求的 URL、请求方式和请求参数。
request.ts 文件中的 Axios 实例定义及拦截器配置
在 request.ts 文件中，首先定义了一个名为 service 的 Axios 实例，它包含了一些全局的配置，如 baseURL 和 timeout，以及请求拦截器和响应拦截器。
请求拦截器：在请求发出前会对请求进行处理，例如序列化 GET 请求的参数、添加请求头信息等。
响应拦截器：对从服务器返回的数据进行处理，例如根据返回的 code 和 msg 进行统一的错误处理。
请求拦截器配置
service.interceptors.request.use((config: AxiosRequestConfig) => {// 对get请求参数进行序列化// 统一增加Authorization和TENANT-ID请求头// 自动适配单体、微服务架构不同的URL// 处理完毕，返回config对象return config;},(error) => {// 对请求错误进行处理return Promise.reject(error);}
);
在这段代码中，请求拦截器对请求进行了处理，包括序列化 GET 请求的参数、添加 Authorization 和 TENANT-ID 请求头，以及自动适配单体和微服务架构不同的 URL。
响应拦截器处理函数
const handleResponse = (response: AxiosResponse<any>) => {// 处理响应结果// 如果响应成功，则返回响应的data属性；否则，抛出错误
};
handleResponse 函数用于处理响应结果，根据返回的数据决定是返回数据还是抛出错误。
响应拦截器配置
service.interceptors.response.use(handleResponse, (error) => {// 处理响应错误return Promise.reject(error.response.data);
});
在这里，响应拦截器使用了 handleResponse 函数处理响应结果，同时也处理了响应的错误情况。
综上所述，调用 fetchList 函数实际上是调用了通过 Axios 实例对象 service 封装的请求方法，该方法会发送请求并对请求和响应进行统一处理
)
