- Added cancelable concept that works (rough)

Author: ferdikoomen

src/templates/core/CancelablePromise.hbs

@@ -1,16 +1,73 @@
-export class CancelablePromise<T> extends Promise<T> {
+export class CancelablePromise<T> implements Promise<T> {
+    readonly [Symbol.toStringTag]: string;
 
-    private readonly _cancel:  (reason?: any) => void;
+    private _isPending: boolean = true;
+    private _isCanceled: boolean = false;
+    private _promise: Promise<T>;
+    private _resolve?: (value: T | PromiseLike<T>) => void;
+    private _reject?: (reason?: unknown) => void;
+    private _cancelHandler?: () => void;
 
-    constructor(executor: (
-        resolve: (value: T | PromiseLike<T>) => void,
-        reject: () => void
-        cancel: () => void
-    ) => void) {
-        super(executor);
+    constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: unknown) => void, onCancel: (cancelHandler: () => void) => void) => void) {
+        this._promise = new Promise<T>((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+
+            const onResolve = (value: T | PromiseLike<T>): void => {
+                if (!this._isCanceled && this._resolve) {
+                    this._isPending = false;
+                    this._resolve(value);
+                }
+            };
+
+            const onReject = (reason?: unknown): void => {
+                if (this._reject) {
+                    this._isPending = false;
+                    this._reject(reason);
+                }
+            };
+
+            const onCancel = (cancelHandler: () => void): void => {
+                if (this._isPending) {
+                    this._cancelHandler = cancelHandler;
+                }
+            };
+
+            return executor(onResolve, onReject, onCancel);
+        });
+    }
+
+    public then<TResult1 = T, TResult2 = never>(
+        onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
+        onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
+    ): Promise<TResult1 | TResult2> {
+        return this._promise.then(onFulfilled, onRejected);
+    }
+
+    public catch<TResult = never>(onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult> {
+        return this._promise.catch(onRejected);
+    }
+
+    public finally(onFinally?: (() => void) | undefined | null): Promise<T> {
+        return this._promise.finally(onFinally);
     }
 
     public cancel() {
-        //
+        if (!this._isPending || this._isCanceled) {
+            return;
+        }
+        this._isCanceled = true;
+        if (this._cancelHandler && this._reject) {
+            try {
+                this._cancelHandler();
+            } catch (error) {
+                this._reject(error);
+                return;
+            }
+        }
+    }
+
+    public get isCanceled(): boolean {
+        return this._isCanceled;
     }
 }

src/templates/core/fetch/getRequestBody.hbs

@@ -2,12 +2,14 @@ function getRequestBody(options: ApiRequestOptions): BodyInit | undefined {
     if (options.formData) {
         return getFormData(options.formData);
     }
+
     if (options.body) {
         if (isString(options.body) || isBlob(options.body)) {
             return options.body;
         } else {
             return JSON.stringify(options.body);
         }
     }
+
     return undefined;
 }

src/templates/core/fetch/getResponseBody.hbs

@@ -12,5 +12,6 @@ async function getResponseBody(response: Response): Promise<any> {
     } catch (error) {
         console.error(error);
     }
+
     return null;
 }

src/templates/core/fetch/getResponseHeader.hbs

@@ -5,5 +5,6 @@ function getResponseHeader(response: Response, responseHeader?: string): string
             return content;
         }
     }
+
     return null;
 }

src/templates/core/fetch/request.hbs

@@ -55,21 +55,26 @@ import { OpenAPI } from './OpenAPI';
  * @throws ApiError
  */
 export function request<T>(options: ApiRequestOptions): CancelablePromise<T> {
-    return new CancelablePromise((resolve, reject, cancel) => {
-        const controller = new AbortController();
-        const url = getUrl(options);
-        const response = await sendRequest(options, url, controller.signal);
-        const responseBody = await getResponseBody(response);
-        const responseHeader = getResponseHeader(response, options.responseHeader);
-
-        const result: ApiResult = {
-            url,
-            ok: response.ok,
-            status: response.status,
-            statusText: response.statusText,
-            body: responseHeader || responseBody,
-        };
-
-        catchErrors(options, result);
+    return new CancelablePromise(async (resolve, reject, onCancel) => {
+        try {
+            const url = getUrl(options);
+            const response = await sendRequest(options, url, onCancel);
+            const responseBody = await getResponseBody(response);
+            const responseHeader = getResponseHeader(response, options.responseHeader);
+
+            const result: ApiResult = {
+                url,
+                ok: response.ok,
+                status: response.status,
+                statusText: response.statusText,
+                body: responseHeader || responseBody,
+            };
+
+            catchErrors(options, result);
+
+            resolve(result.body);
+        } catch (error) {
+            reject(error);
+        }
     });
 }

src/templates/core/fetch/sendRequest.hbs

@@ -1,12 +1,18 @@
-async function sendRequest(options: ApiRequestOptions, url: string, signal: AbortSignal): Promise<Response> {
+async function sendRequest(options: ApiRequestOptions, url: string, onCancel: (cancelHandler: () => void) => void): Promise<Response> {
+    const controller = new AbortController();
+    
     const request: RequestInit = {
         method: options.method,
         headers: await getHeaders(options),
         body: getRequestBody(options),
-        signal,
+        signal: controller.signal,
     };
+
     if (OpenAPI.WITH_CREDENTIALS) {
         request.credentials = 'include';
     }
+
+    onCancel(() => controller.abort());
+
     return await fetch(url, request);
 }

src/templates/core/functions/getFormData.hbs

@@ -1,10 +1,12 @@
 function getFormData(params: Record<string, any>): FormData {
     const formData = new FormData();
+
     Object.keys(params).forEach(key => {
         const value = params[key];
         if (isDefined(value)) {
             formData.append(key, value);
         }
     });
+
     return formData;
 }

src/templates/core/functions/getQueryString.hbs

@@ -1,5 +1,6 @@
 function getQueryString(params: Record<string, any>): string {
     const qs: string[] = [];
+
     Object.keys(params).forEach(key => {
         const value = params[key];
         if (isDefined(value)) {
@@ -12,8 +13,10 @@ function getQueryString(params: Record<string, any>): string {
             }
         }
     });
+
     if (qs.length > 0) {
         return `?${qs.join('&')}`;
     }
+
     return '';
 }

src/templates/core/functions/getUrl.hbs

@@ -5,5 +5,6 @@ function getUrl(options: ApiRequestOptions): string {
     if (options.query) {
         return `${url}${getQueryString(options.query)}`;
     }
+
     return url;
 }

src/templates/core/node/getRequestBody.hbs

@@ -2,12 +2,14 @@ function getRequestBody(options: ApiRequestOptions): BodyInit | undefined {
     if (options.formData) {
         return getFormData(options.formData);
     }
+
     if (options.body) {
         if (isString(options.body) || isBinary(options.body)) {
             return options.body;
         } else {
             return JSON.stringify(options.body);
         }
     }
+
     return undefined;
 }