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 封装的请求方法,该方法会发送请求并对请求和响应进行统一处理

相关推荐
小墨宝10 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED26 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿30 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子30 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6643 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js