axios配置以及说明

import request from '/@/utils/request';

typescript 复制代码

export function fetchList(query?: Object) {
	return request({
		url: '/admin/audit/page',
		method: 'get',
		params: query,
	});

request.ts

typescript 复制代码

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 跳过增加token
		const 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;
		}

		// 自动适配单体和微服务架构不同的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) {
		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 方法

typescript 复制代码

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 进行统一的错误处理。

请求拦截器配置

typescript 复制代码

service.interceptors.request.use(
	(config: AxiosRequestConfig) => {
		// 对get请求参数进行序列化
		// 统一增加Authorization和TENANT-ID请求头
		// 自动适配单体、微服务架构不同的URL
		// 处理完毕，返回config对象
		return config;
	},
	(error) => {
		// 对请求错误进行处理
		return Promise.reject(error);
	}
);

在这段代码中，请求拦截器对请求进行了处理，包括序列化 GET 请求的参数、添加 Authorization 和 TENANT-ID 请求头，以及自动适配单体和微服务架构不同的 URL。

响应拦截器处理函数

typescript 复制代码

const handleResponse = (response: AxiosResponse<any>) => {
	// 处理响应结果
	// 如果响应成功，则返回响应的data属性；否则，抛出错误
};

handleResponse 函数用于处理响应结果，根据返回的数据决定是返回数据还是抛出错误。

响应拦截器配置

typescript 复制代码

service.interceptors.response.use(handleResponse, (error) => {
	// 处理响应错误
	return Promise.reject(error.response.data);
});

在这里，响应拦截器使用了 handleResponse 函数处理响应结果，同时也处理了响应的错误情况。

综上所述，调用 fetchList 函数实际上是调用了通过 Axios 实例对象 service 封装的请求方法，该方法会发送请求并对请求和响应进行统一处理