快捷導(dǎo)航

vue使用axios的小技巧分享

更新時間：2023年10月27日 09:55:50 作者：落筆憶夢

這篇文章主要為大家詳細介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細,對我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

全局loading

在日常開發(fā)工作中，每次使用api請求數(shù)據(jù)時，都會涉及添加loading狀態(tài)，從而達到優(yōu)化用戶體驗的效果，特別是對于請求時間較長的接口時。這樣每次請求開始時就要添加loading狀態(tài)，請求完成時要移除loading狀態(tài)，導(dǎo)致重復(fù)又繁瑣的工作。所以我們可以思考從axios方向著手，嘻嘻嘻...

思路

創(chuàng)建axios函數(shù) 我們采用axios.create()創(chuàng)建http方法

/**
 * Axios實例化參數(shù)選項對象
 * @const
 * @type {object}
 * @property {object} headers 請求頭對象對象，默認：null
 * @property {number} timeout 超時時間，默認：0， 不限制
 * @property {boolean} withCredentials 是否帶上驗證信息， 默認：true
 * @property {number} maxContentLength 限制最大發(fā)送內(nèi)容長度，默認：-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

添加loading

axios具有請求攔截器以及響應(yīng)攔截器的特性進行處理。我們在請求攔截器觸發(fā)時添加loading，響應(yīng)攔截器觸發(fā)時移除loading。

import { ElLoading } from 'element-plus';

// 全局loading
let loadingInstance;

/**
 * Axios實例化參數(shù)選項對象
 * @const
 * @type {object}
 * @property {object} headers 請求頭對象對象，默認：null
 * @property {number} timeout 超時時間，默認：0， 不限制
 * @property {boolean} withCredentials 是否帶上驗證信息， 默認：true
 * @property {number} maxContentLength 限制最大發(fā)送內(nèi)容長度，默認：-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) => {
	// 創(chuàng)建全局loading
	loadingInstance = ElLoading.service({
		text: '加載中...',
		target: '#ContentArea'
	});
	return config;
});

// 響應(yīng)攔截器
http.interceptors.response.use((res) => {
	nextTick(() => {
		loadingInstance?.close();
	});
});
export default http

注意

這個時候乍一看是沒有什么問題的，但是當多個請求同時執(zhí)行時，每個請求都會添加全局loading，當?shù)谝粋€請求完成時全局loading就被移除了，實際上應(yīng)該是最后一個請求完成時，才移除全局loading。

處理loading混亂基于loading的攔截器，我們可以定義一個請求隊列，對當前正在進行中的請求進行管理，在請求攔截器中將該請求添加進請求隊列中，當請求隊列的長度為0時，添加loading，在響應(yīng)攔截器中將該請求從請求隊列中移除，當請求隊列的長度為0時，移除loading。

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;
		}
	}
}
/**
 * 創(chuàng)建緩存key, 由請求url、類型、參數(shù)、發(fā)送數(shù)據(jù)構(gòu)成的標識符
 * @param {string} url 請求url
 * @param {string} type 請求類型
 * @param {object} params url參數(shù)對象
 * @param {object} data 請求數(shù)據(jù)
 * @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實例化參數(shù)選項對象
 * @const
 * @type {object}
 * @property {object} headers 請求頭對象對象，默認：null
 * @property {number} timeout 超時時間，默認：0， 不限制
 * @property {boolean} withCredentials 是否帶上驗證信息， 默認：true
 * @property {number} maxContentLength 限制最大發(fā)送內(nèi)容長度，默認：-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) {
		// 創(chuàng)建全局loading
		loadingInstance = ElLoading.service({
			text: '加載中...'
		});
	}
	httpPromiseArr.set(createKey(config));
	return config;
});

// 響應(yīng)攔截器
http.interceptors.response.use((res) => {
	const key = createKey(res.config);

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

	// 全部請求結(jié)束關(guān)閉loading
	if (httpPromiseArr.size === 0) {
		nextTick(() => {
			loadingInstance?.close();
		});
	}
});
export default http