vue使用axios的小技巧分享

/**
 * Axios实例化参数选项对象
 * @const
 * @type {object}
 * @property {object} headers 请求头对象对象，默认：null
 * @property {number} timeout 超时时间，默认：0， 不限制
 * @property {boolean} withCredentials 是否带上验证信息， 默认：true
 * @property {number} maxContentLength 限制最大发送内容长度，默认：-1 不限制
 * @property {strin} baseURL 默认请求拼接的前缀
 */
const http = axios.create({
	headers: {
		'Content-Type': 'application/json;charset=UTF-8',
		// ie浏览器get请求兼容问题
		'Cache-Control': 'no-cache',
		'If-Modified-Since': '0'
	},
	timeout: 0,
	withCredentials: false,
	responseType: 'json',
	maxContentLength: -1,
	baseURL: import.meta.env.VITE_APP_BASE_API
});
export default http

import { ElLoading } from 'element-plus';

// 全局loading
let loadingInstance;

/**
 * Axios实例化参数选项对象
 * @const
 * @type {object}
 * @property {object} headers 请求头对象对象，默认：null
 * @property {number} timeout 超时时间，默认：0， 不限制
 * @property {boolean} withCredentials 是否带上验证信息， 默认：true
 * @property {number} maxContentLength 限制最大发送内容长度，默认：-1 不限制
 * @property {strin} baseURL 默认请求拼接的前缀
 */
const http = axios.create({
	headers: {
		'Content-Type': 'application/json;charset=UTF-8',
		// ie浏览器get请求兼容问题
		'Cache-Control': 'no-cache',
		'If-Modified-Since': '0'
	},
	timeout: 0,
	withCredentials: false,
	responseType: 'json',
	maxContentLength: -1,
	baseURL: import.meta.env.VITE_APP_BASE_API
});
/**
 * 请求拦截器
 */
http.interceptors.request.use((config) => {
	// 创建全局loading
	loadingInstance = ElLoading.service({
		text: '加载中...',
		target: '#ContentArea'
	});
	return config;
});

// 响应拦截器
http.interceptors.response.use((res) => {
	nextTick(() => {
		loadingInstance?.close();
	});
});
export default http

import { ElLoading } from 'element-plus';

// 请求队列
const httpPromiseArr = new Map();

// 全局loading
let loadingInstance;

/**
 * 判断是否为JSON格式
 * @param {*} str
 * @returns
 */
function isJSON(str) {
	if (typeof str == 'string') {
		try {
			JSON.parse(str);
			return true;
		} catch (e) {
			return false;
		}
	}
}
/**
 * 创建缓存key, 由请求url、类型、参数、发送数据构成的标识符
 * @param {string} url 请求url
 * @param {string} type 请求类型
 * @param {object} params url参数对象
 * @param {object} data 请求数据
 * @return {string}
 */
function createKey(config) {
	const { url, method, params = {}, data = {} } = config;
	return encodeURIComponent(
		[url, method, isJSON(params) ? params : JSON.stringify(params), isJSON(data) ? data : JSON.stringify(data)].join(
			','
		)
	);
}

/**
 * Axios实例化参数选项对象
 * @const
 * @type {object}
 * @property {object} headers 请求头对象对象，默认：null
 * @property {number} timeout 超时时间，默认：0， 不限制
 * @property {boolean} withCredentials 是否带上验证信息， 默认：true
 * @property {number} maxContentLength 限制最大发送内容长度，默认：-1 不限制
 * @property {strin} baseURL 默认请求拼接的前缀
 */
const http = axios.create({
	headers: {
		'Content-Type': 'application/json;charset=UTF-8',
		// ie浏览器get请求兼容问题
		'Cache-Control': 'no-cache',
		'If-Modified-Since': '0'
	},
	timeout: 0,
	withCredentials: false,
	responseType: 'json',
	maxContentLength: -1,
	baseURL: import.meta.env.VITE_APP_BASE_API
});
/**
 * 请求拦截器
 */
http.interceptors.request.use((config) => {
	if (httpPromiseArr.size === 0) {
		// 创建全局loading
		loadingInstance = ElLoading.service({
			text: '加载中...'
		});
	}
	httpPromiseArr.set(createKey(config));
	return config;
});

// 响应拦截器
http.interceptors.response.use((res) => {
	const key = createKey(res.config);

	if (httpPromiseArr.has(key)) {
		httpPromiseArr.delete(key);
	}

	// 全部请求结束关闭loading
	if (httpPromiseArr.size === 0) {
		nextTick(() => {
			loadingInstance?.close();
		});
	}
});
export default http