- Fixed just in time cancelation scenario

Author: ferdikoomen

src/templates/core/ApiError.hbs

@@ -11,6 +11,7 @@ export class ApiError extends Error {
     constructor(response: ApiResult, message: string) {
         super(message);
 
+        this.name = 'ApiError';
         this.url = response.url;
         this.status = response.status;
         this.statusText = response.statusText;

src/templates/core/CancelablePromise.hbs

@@ -1,10 +1,29 @@
 {{>header}}
 
+export class CancelError extends Error {
+
+    constructor(reason: string = 'Promise was canceled') {
+        super(reason);
+        this.name = 'CancelError';
+    }
+
+    public get isCancelled(): boolean {
+        return true;
+    }
+}
+
+export interface OnCancel {
+    readonly isPending: boolean;
+    readonly isCancelled: boolean;
+
+    (cancelHandler: () => void): void;
+}
+
 export class CancelablePromise<T> implements Promise<T> {
     readonly [Symbol.toStringTag]: string;
 
     #isPending: boolean;
-    #isCanceled: boolean;
+    #isCancelled: boolean;
     readonly #cancelHandlers: (() => void)[];
     readonly #promise: Promise<T>;
     #resolve?: (value: T | PromiseLike<T>) => void;
@@ -14,18 +33,18 @@ export class CancelablePromise<T> implements Promise<T> {
         executor: (
             resolve: (value: T | PromiseLike<T>) => void,
             reject: (reason?: any) => void,
-            onCancel: (cancelHandler: () => void) => void
+            onCancel: OnCancel
         ) => void
     ) {
         this.#isPending = true;
-        this.#isCanceled = false;
+        this.#isCancelled = false;
         this.#cancelHandlers = [];
         this.#promise = new Promise<T>((resolve, reject) => {
             this.#resolve = resolve;
             this.#reject = reject;
 
             const onResolve = (value: T | PromiseLike<T>): void => {
-                if (!this.#isCanceled) {
+                if (!this.#isCancelled) {
                     this.#isPending = false;
                     this.#resolve?.(value);
                 }
@@ -42,7 +61,15 @@ export class CancelablePromise<T> implements Promise<T> {
                 }
             };
 
-            return executor(onResolve, onReject, onCancel);
+            Object.defineProperty(onCancel, 'isPending', {
+                get: (): boolean => this.#isPending,
+            });
+
+            Object.defineProperty(onCancel, 'isCancelled', {
+                get: (): boolean => this.#isCancelled,
+            });
+
+            return executor(onResolve, onReject, onCancel as OnCancel);
         });
     }
 
@@ -64,10 +91,10 @@ export class CancelablePromise<T> implements Promise<T> {
     }
 
     public cancel(): void {
-        if (!this.#isPending || this.#isCanceled) {
+        if (!this.#isPending || this.#isCancelled) {
             return;
         }
-        this.#isCanceled = true;
+        this.#isCancelled = true;
         if (this.#cancelHandlers.length) {
             try {
                 for (const cancelHandler of this.#cancelHandlers) {
@@ -80,7 +107,7 @@ export class CancelablePromise<T> implements Promise<T> {
         }
     }
 
-    public get isCanceled(): boolean {
-        return this.#isCanceled;
+    public get isCancelled(): boolean {
+        return this.#isCancelled;
     }
 }

src/templates/core/axios/getRequestBody.hbs

@@ -0,0 +1,6 @@
+function getRequestBody(options: ApiRequestOptions): any {
+    if (options.body) {
+        return options.body;
+    }
+    return;
+}

src/templates/core/axios/getResponseBody.hbs

@@ -2,5 +2,5 @@ function getResponseBody(response: AxiosResponse<any>): any {
     if (response.status !== 204) {
         return response.data;
     }
-    return null;
+    return;
 }

src/templates/core/axios/getResponseHeader.hbs

@@ -1,9 +1,9 @@
-function getResponseHeader(response: AxiosResponse<any>, responseHeader?: string): string | null {
+function getResponseHeader(response: AxiosResponse<any>, responseHeader?: string): string | undefined {
     if (responseHeader) {
         const content = response.headers[responseHeader];
         if (isString(content)) {
             return content;
         }
     }
-    return null;
+    return;
 }

src/templates/core/axios/request.hbs

@@ -7,6 +7,7 @@ import { ApiError } from './ApiError';
 import type { ApiRequestOptions } from './ApiRequestOptions';
 import type { ApiResult } from './ApiResult';
 import { CancelablePromise } from './CancelablePromise';
+import type { OnCancel } from './CancelablePromise';
 import { OpenAPI } from './OpenAPI';
 
 {{>functions/isDefined}}
@@ -39,6 +40,9 @@ import { OpenAPI } from './OpenAPI';
 {{>axios/getHeaders}}
 
 
+{{>axios/getRequestBody}}
+
+
 {{>axios/sendRequest}}
 
 
@@ -61,21 +65,27 @@ export function request<T>(options: ApiRequestOptions): CancelablePromise<T> {
     return new CancelablePromise(async (resolve, reject, onCancel) => {
         try {
             const url = getUrl(options);
-            const response = await sendRequest(options, url, onCancel);
-            const responseBody = getResponseBody(response);
-            const responseHeader = getResponseHeader(response, options.responseHeader);
-
-            const result: ApiResult = {
-                url,
-                ok: isSuccess(response.status),
-                status: response.status,
-                statusText: response.statusText,
-                body: responseHeader || responseBody,
-            };
-
-            catchErrors(options, result);
-
-            resolve(result.body);
+            const formData = getFormData(options);
+            const body = getRequestBody(options);
+            const headers = await getHeaders(options, formData);
+
+            if (!onCancel.isCancelled) {
+                const response = await sendRequest(options, url, formData, body, headers, onCancel);
+                const responseBody = getResponseBody(response);
+                const responseHeader = getResponseHeader(response, options.responseHeader);
+
+                const result: ApiResult = {
+                    url,
+                    ok: isSuccess(response.status),
+                    status: response.status,
+                    statusText: response.statusText,
+                    body: responseHeader || responseBody,
+                };
+
+                catchErrors(options, result);
+
+                resolve(result.body);
+            }
         } catch (error) {
             reject(error);
         }

src/templates/core/axios/sendRequest.hbs

@@ -1,13 +1,18 @@
-async function sendRequest(options: ApiRequestOptions, url: string, onCancel: (cancelHandler: () => void) => void): Promise<AxiosResponse<any>> {
+async function sendRequest(
+    options: ApiRequestOptions,
+    url: string,
+    formData: FormData | undefined,
+    body: any,
+    headers: Record<string, string>,
+    onCancel: OnCancel
+): Promise<AxiosResponse<any>> {
     const source = axios.CancelToken.source();
-    const formData = options.formData && getFormData(options.formData);
-    const data = formData || options.body;
 
     const config: AxiosRequestConfig = {
         url,
-        data,
+        headers,
+        data: body || formData,
         method: options.method,
-        headers: await getHeaders(options, formData),
         cancelToken: source.token,
     };
 

src/templates/core/fetch/getHeaders.hbs

@@ -37,5 +37,6 @@ async function getHeaders(options: ApiRequestOptions): Promise<Headers> {
             headers.append('Content-Type', 'application/json');
         }
     }
+
     return headers;
 }

src/templates/core/fetch/getRequestBody.hbs

@@ -1,8 +1,4 @@
 function getRequestBody(options: ApiRequestOptions): BodyInit | undefined {
-    if (options.formData) {
-        return getFormData(options.formData);
-    }
-
     if (options.body) {
         if (options.mediaType?.includes('/json')) {
             return JSON.stringify(options.body)
@@ -12,6 +8,5 @@ function getRequestBody(options: ApiRequestOptions): BodyInit | undefined {
             return JSON.stringify(options.body);
         }
     }
-
-    return undefined;
+    return;
 }

src/templates/core/fetch/getResponseBody.hbs

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