feat(common): Add request cancellation to http service

Author: Boshen

packages/common/http/http.service.ts

@@ -1,5 +1,10 @@
-import Axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import { defer, Observable } from 'rxjs';
+import Axios, {
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  AxiosPromise,
+} from 'axios';
+import { Observable } from 'rxjs';
 import { Inject } from '../decorators';
 import { AXIOS_INSTANCE_TOKEN } from './http.constants';
 
@@ -10,55 +15,81 @@ export class HttpService {
   ) {}
 
   request<T = any>(config: AxiosRequestConfig): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.request<T>(config));
+    return this.makeObservable<T>(this.instance.request, config);
   }
 
   get<T = any>(
     url: string,
     config?: AxiosRequestConfig,
   ): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.get<T>(url, config));
+    return this.makeObservable<T>(this.instance.get, url, config);
   }
 
   delete<T = any>(
     url: string,
     config?: AxiosRequestConfig,
   ): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.delete(url, config));
+    return this.makeObservable<T>(this.instance.delete, url, config);
   }
 
   head<T = any>(
     url: string,
     config?: AxiosRequestConfig,
   ): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.head(url, config));
+    return this.makeObservable<T>(this.instance.head, url, config);
   }
 
   post<T = any>(
     url: string,
     data?: any,
     config?: AxiosRequestConfig,
   ): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.post(url, data, config));
+    return this.makeObservable<T>(this.instance.post, url, data, config);
   }
 
   put<T = any>(
     url: string,
     data?: any,
     config?: AxiosRequestConfig,
   ): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.put(url, data, config));
+    return this.makeObservable<T>(this.instance.put, url, data, config);
   }
 
   patch<T = any>(
     url: string,
     data?: any,
     config?: AxiosRequestConfig,
   ): Observable<AxiosResponse<T>> {
-    return defer(() => this.instance.patch(url, data, config));
+    return this.makeObservable<T>(this.instance.patch, url, data, config);
   }
 
   get axiosRef(): AxiosInstance {
     return this.instance;
   }
+
+  private makeObservable<T>(
+    axios: (...args: any[]) => AxiosPromise<T>,
+    ...args: any[]
+  ) {
+    return new Observable<AxiosResponse<T>>(subscriber => {
+      let config = args[args.length - 1];
+      if (!config) {
+        config = {};
+        args[args.length - 1] = config;
+      }
+      const cancelSource = Axios.CancelToken.source();
+      config.cancelToken = cancelSource.token;
+      axios(...args)
+        .then(res => {
+          subscriber.next(res);
+          subscriber.complete();
+        })
+        .catch(err => {
+          subscriber.error(err);
+        });
+      return () => {
+        cancelSource.cancel();
+      };
+    });
+  }
 }