fix: queries continue running after page unmounted

This commit is contained in:
yangsy
2025-08-25 23:32:25 +08:00
parent 59a14cb9e1
commit 3cfb829608
20 changed files with 98 additions and 112 deletions

View File

@@ -15,25 +15,8 @@ export interface RequestOptions extends CreateAxiosDefaults {
export class Request {
private instance: AxiosInstance;
private abortController: AbortController;
private lastAbortController: AbortController | null;
private uniq: boolean;
constructor(config?: RequestOptions) {
this.instance = axios.create(config);
this.abortController = new AbortController();
this.lastAbortController = null;
this.uniq = false;
this.instance.interceptors.request.use((config) => {
// 取消上一次请求
if (this.uniq && this.lastAbortController?.signal) {
this.lastAbortController.abort();
}
this.lastAbortController = this.abortController;
this.abortController = new AbortController();
return config;
});
const requestInterceptor = config?.requestInterceptor ?? Request.defaultRequestInterceptor;
const responseInterceptor = config?.responseInterceptor ?? Request.defaultResponseInterceptor;
@@ -65,14 +48,12 @@ export class Request {
return this.instance;
}
get<T>(url: string, option?: AxiosRequestConfig & { uniq?: boolean }): Promise<Response<T>> {
const { uniq, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
get<T>(url: string, option?: AxiosRequestConfig): Promise<Response<T>> {
const reqConfig = option ?? {};
return new Promise((resolve) => {
this.instance
.get<Result<T>>(url, {
...reqConfig,
signal: this.abortController.signal,
})
.then((res) => {
resolve([null, res.data.data, res.data]);
@@ -83,12 +64,11 @@ export class Request {
});
}
post<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { retRaw?: boolean; uniq?: boolean; upload?: boolean }): Promise<Response<T>> {
const { retRaw, uniq, upload, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
post<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { retRaw?: boolean; upload?: boolean }): Promise<Response<T>> {
const { retRaw, upload, ...reqConfig } = option ?? {};
return new Promise((resolve) => {
this.instance
.post(url, data, { ...reqConfig, headers: { 'content-type': upload ? 'multipart/form-data' : 'application/json' }, signal: this.abortController.signal })
.post(url, data, { ...reqConfig, headers: { 'content-type': upload ? 'multipart/form-data' : 'application/json' } })
.then((res) => {
const resData = res.data;
if (retRaw) {
@@ -103,12 +83,11 @@ export class Request {
});
}
put<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { uniq?: boolean }): Promise<Response<T>> {
const { uniq, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
put<T>(url: string, data: AxiosRequestConfig['data'], option?: Partial<Omit<AxiosRequestConfig, 'data'>>): Promise<Response<T>> {
const reqConfig = option ?? {};
return new Promise((resolve) => {
this.instance
.put<Result<T>>(url, data, { ...reqConfig, signal: this.abortController.signal })
.put<Result<T>>(url, data, { ...reqConfig })
.then((res) => {
resolve([null, res.data.data, res.data]);
})
@@ -118,12 +97,11 @@ export class Request {
});
}
delete<T>(url: string, idList: string[], option?: Partial<Omit<AxiosRequestConfig, 'data'>> & { uniq?: boolean }): Promise<Response<T>> {
const { uniq, ...reqConfig } = option ?? {};
this.uniq = !!uniq;
delete<T>(url: string, idList: string[], option?: Partial<Omit<AxiosRequestConfig, 'data'>>): Promise<Response<T>> {
const reqConfig = option ?? {};
return new Promise((resolve) => {
this.instance
.delete<Result<T>>(url, { ...reqConfig, data: { ids: idList }, signal: this.abortController.signal })
.delete<Result<T>>(url, { ...reqConfig, data: { ids: idList } })
.then((res) => {
resolve([null, res.data.data, res.data]);
})