fix: queries continue running after page unmounted
This commit is contained in:
@@ -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]);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user