feat:回退操作
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { refreshAuthToken, isTokenExpiringSoon, clearToken, requestDeduplicator } from './utils';
|
||||
import { refreshAuthToken, isTokenExpiringSoon, clearToken } from './utils';
|
||||
|
||||
// Token过期处理
|
||||
export const handleTokenExpired = () => {
|
||||
@@ -6,9 +6,6 @@ export const handleTokenExpired = () => {
|
||||
// 清除本地存储
|
||||
clearToken();
|
||||
|
||||
// 清除所有待处理的请求
|
||||
requestDeduplicator.clear();
|
||||
|
||||
// 跳转到登录页面
|
||||
setTimeout(() => {
|
||||
window.location.href = '/login';
|
||||
@@ -128,8 +125,6 @@ export const setupNetworkListener = () => {
|
||||
|
||||
const handleOffline = () => {
|
||||
console.log('网络已断开');
|
||||
// 清除所有待处理的请求
|
||||
requestDeduplicator.clear();
|
||||
showApiError(null, '网络连接已断开,请检查网络设置');
|
||||
};
|
||||
|
||||
@@ -153,7 +148,5 @@ export const initInterceptors = () => {
|
||||
if (cleanupNetwork) {
|
||||
cleanupNetwork();
|
||||
}
|
||||
// 清理所有待处理的请求
|
||||
requestDeduplicator.clear();
|
||||
};
|
||||
};
|
||||
@@ -1,6 +1,5 @@
|
||||
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||
import { requestInterceptor, responseInterceptor, errorInterceptor } from './interceptors';
|
||||
import { requestDeduplicator, throttle } from './utils';
|
||||
|
||||
// 创建axios实例
|
||||
const request: AxiosInstance = axios.create({
|
||||
@@ -49,52 +48,26 @@ request.interceptors.response.use(
|
||||
}
|
||||
);
|
||||
|
||||
// 带节流和去重的GET请求
|
||||
// 封装GET请求
|
||||
export const get = <T = any>(url: string, config?: AxiosRequestConfig): Promise<T> => {
|
||||
return requestDeduplicator.execute(
|
||||
'GET',
|
||||
url,
|
||||
() => request.get(url, config),
|
||||
config
|
||||
);
|
||||
return request.get(url, config);
|
||||
};
|
||||
|
||||
// 带节流和去重的POST请求
|
||||
// 封装POST请求
|
||||
export const post = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
|
||||
return requestDeduplicator.execute(
|
||||
'POST',
|
||||
url,
|
||||
() => request.post(url, data, config),
|
||||
data
|
||||
);
|
||||
return request.post(url, data, config);
|
||||
};
|
||||
|
||||
// 带节流和去重的PUT请求
|
||||
// 封装PUT请求
|
||||
export const put = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
|
||||
return requestDeduplicator.execute(
|
||||
'PUT',
|
||||
url,
|
||||
() => request.put(url, data, config),
|
||||
data
|
||||
);
|
||||
return request.put(url, data, config);
|
||||
};
|
||||
|
||||
// 带节流和去重的DELETE请求
|
||||
// 封装DELETE请求
|
||||
export const del = <T = any>(url: string, config?: AxiosRequestConfig): Promise<T> => {
|
||||
return requestDeduplicator.execute(
|
||||
'DELETE',
|
||||
url,
|
||||
() => request.delete(url, config),
|
||||
config
|
||||
);
|
||||
return request.delete(url, config);
|
||||
};
|
||||
|
||||
// 带节流的请求函数(用于需要节流但不需要去重的场景)
|
||||
export const throttledGet = throttle(get, 1000);
|
||||
export const throttledPost = throttle(post, 1000);
|
||||
export const throttledPut = throttle(put, 1000);
|
||||
export const throttledDelete = throttle(del, 1000);
|
||||
|
||||
// 导出request实例
|
||||
export { request };
|
||||
export default request;
|
||||
@@ -1,85 +1,5 @@
|
||||
import { authApi } from './auth';
|
||||
|
||||
// 节流函数 - 防止重复请求
|
||||
export const throttle = <T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
delay: number = 1000
|
||||
): T => {
|
||||
let lastCall = 0;
|
||||
let lastCallTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
return ((...args: any[]) => {
|
||||
const now = Date.now();
|
||||
|
||||
if (now - lastCall < delay) {
|
||||
// 如果在节流时间内,取消之前的定时器并设置新的
|
||||
if (lastCallTimer) {
|
||||
clearTimeout(lastCallTimer);
|
||||
}
|
||||
|
||||
lastCallTimer = setTimeout(() => {
|
||||
lastCall = now;
|
||||
func(...args);
|
||||
}, delay - (now - lastCall));
|
||||
} else {
|
||||
// 如果超过节流时间,直接执行
|
||||
lastCall = now;
|
||||
func(...args);
|
||||
}
|
||||
}) as T;
|
||||
};
|
||||
|
||||
// 请求去重管理器
|
||||
class RequestDeduplicator {
|
||||
private pendingRequests: Map<string, Promise<any>> = new Map();
|
||||
|
||||
// 生成请求的唯一键
|
||||
private generateKey(method: string, url: string, data?: any): string {
|
||||
const dataStr = data ? JSON.stringify(data) : '';
|
||||
return `${method}:${url}:${dataStr}`;
|
||||
}
|
||||
|
||||
// 执行请求,如果相同请求正在进行中则返回已存在的Promise
|
||||
async execute<T>(
|
||||
method: string,
|
||||
url: string,
|
||||
requestFn: () => Promise<T>,
|
||||
data?: any
|
||||
): Promise<T> {
|
||||
const key = this.generateKey(method, url, data);
|
||||
|
||||
// 如果相同的请求正在进行中,返回已存在的Promise
|
||||
if (this.pendingRequests.has(key)) {
|
||||
console.log(`请求去重: ${key}`);
|
||||
return this.pendingRequests.get(key)!;
|
||||
}
|
||||
|
||||
// 创建新的请求Promise
|
||||
const requestPromise = requestFn().finally(() => {
|
||||
// 请求完成后从pendingRequests中移除
|
||||
this.pendingRequests.delete(key);
|
||||
});
|
||||
|
||||
// 将请求Promise存储到Map中
|
||||
this.pendingRequests.set(key, requestPromise);
|
||||
|
||||
return requestPromise;
|
||||
}
|
||||
|
||||
// 清除所有待处理的请求
|
||||
clear() {
|
||||
this.pendingRequests.clear();
|
||||
}
|
||||
|
||||
// 获取当前待处理请求数量
|
||||
getPendingCount(): number {
|
||||
return this.pendingRequests.size;
|
||||
}
|
||||
}
|
||||
|
||||
// 创建全局请求去重实例
|
||||
export const requestDeduplicator = new RequestDeduplicator();
|
||||
|
||||
// 设置token到localStorage
|
||||
export const setToken = (token: string) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
|
||||
Reference in New Issue
Block a user