Request cancellation support

[ApacheEx]

First, thanks for the awesome library.

Would be really cool if we can extend the default template to support request cancellation...
for example as it's described here: https://react-query.tanstack.com/docs/guides/query-cancellation#using-fetch

what do you think? (in fact it should be easy to change and I can contribute if you give this idea a green light)

p.s I know that there is a possibility to provider a custom template, but would be nice to support it out of the box.

[js2me]

Hello @ApacheEx ! Thanks for sweet words :)
I will think about it, I know the request cancellation it is very nice thing!
But now I need to release 4.0.0 version with ETA templates, --modular option and other cool things, and after I'll add request cancellation support

[emagnier]

Thanks for this nice library, awesome work!

Yes the request cancellation would be a nice addition. It's especially useful to avoid potential memory leaks when you build complex UI, so you can cancel a request if a UI component is unmount.

[js2me]

Here is update http client template sketch with request cancellation support

<%
const { apiConfig, generateResponses } = it;
%>


type CancelToken = Symbol | string | number;

const abortControllersMap = new Map<CancelToken, AbortController>();

export type RequestParams = Omit<RequestInit, "body" | "method" | "signal"> & {
    secure?: boolean;
    cancelToken?: CancelToken;
}

export type RequestQueryParamsType = Record<string | number, any>;


interface ApiConfig<<%~ apiConfig.generic.map(g => g.name).join(', ') %>> {
    baseUrl?: string;
    baseApiParams?: Omit<RequestParams, "cancelToken">;
    securityWorker?: (securityData: SecurityDataType) => Omit<RequestParams, "cancelToken">;
}

<% if (generateResponses) {%>
/** Overrided Promise type. Needs for additional typings of `.catch` callback */
type TPromise<ResolveType, RejectType = any> = Omit<Promise<ResolveType>, "then" | "catch"> & {
    then<TResult1 = ResolveType, TResult2 = never>(onfulfilled?: ((value: ResolveType) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: RejectType) => TResult2 | PromiseLike<TResult2>) | undefined | null): TPromise<TResult1 | TResult2, RejectType>;
    catch<TResult = never>(onrejected?: ((reason: RejectType) => TResult | PromiseLike<TResult>) | undefined | null): TPromise<ResolveType | TResult, RejectType>;
}
<% } %>

interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
    data: D;
    error: E;
}

enum BodyType {
    Json,
    FormData
}

export class HttpClient<<%~ apiConfig.generic.map(g => `${g.name} = unknown`).join(', ') %>> {
    public baseUrl: string = "<%~ apiConfig.baseUrl %>";
    private securityData: SecurityDataType = (null as any);
    private securityWorker: null | ApiConfig<<%~ apiConfig.generic.map(g => g.name).join(', ') %>>["securityWorker"] = null;

    private baseApiParams: RequestParams = {
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow',
        referrerPolicy: 'no-referrer',
    }

    constructor(apiConfig: ApiConfig<<%~ apiConfig.generic.map(g => g.name).join(', ') %>> = {}) {
        Object.assign(this, apiConfig);
    }

    public setSecurityData = (data: SecurityDataType) => {
        this.securityData = data
    }

    private addQueryParam(query: RequestQueryParamsType, key: string) {
        return encodeURIComponent(key) + "=" + encodeURIComponent(Array.isArray(query[key]) ? query[key].join(",") : query[key])
    }

    protected addQueryParams(rawQuery?: RequestQueryParamsType): string {
        const query = rawQuery || {};
        const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
        return keys.length ? `?${keys.map(key =>
            typeof query[key] === "object" && !Array.isArray(query[key]) ?
            this.addQueryParams(query[key] as object).substring(1) :
            this.addQueryParam(query, key)).join("&")
        }` : "";
    }

    private bodyFormatters: Record<BodyType, (input: any) => any> = {
        [BodyType.Json]: JSON.stringify,
        [BodyType.FormData]: (input: any) =>
            Object.keys(input).reduce((data, key) => {
            data.append(key, input[key]);
            return data;
        }, new FormData()),
    }

    private mergeRequestOptions(params: RequestParams, securityParams?: RequestParams): RequestParams {
        return {
            ...this.baseApiParams,
            ...params,
            ...(securityParams || {}),
            headers: {
                ...(this.baseApiParams.headers || {}),
                ...(params.headers || {}),
                ...((securityParams && securityParams.headers) || {})
            }
        }
    }

    private safeParseResponse = <T = any, E = any>(response: Response): Promise<HttpResponse<T, E>> => {
        const r = response as HttpResponse<T, E>;
        r.data = null as unknown as T;
        r.error = null as unknown as E;

        return response
            .json()
            .then((data) => {
                if (r.ok) {
                    r.data = data;
                } else {
                    r.error = data;
                }
                return r;
            })
            .catch((e) => {
                r.error = e;
                return r;
            });
    }

    private createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
        if (abortControllersMap.has(cancelToken)) {
            const abortController = abortControllersMap.get(cancelToken);
            if (abortController) {
                return abortController.signal;
            }
            return void 0;
        }
        
        const abortController = new AbortController();
        abortControllersMap.set(cancelToken, abortController);
        return abortController.signal;
    }

    public abortRequest = (cancelToken: CancelToken) => {
        const abortController = abortControllersMap.get(cancelToken)

        if (abortController) {
            abortController.abort();
        }
    }

    public request = <T = any, E = any>(
        path: string,
        method: string,
        { secure, cancelToken, ...params }: RequestParams = {},
        body?: any,
        bodyType?: BodyType,
        secureByDefault?: boolean,
    ): <% if (generateResponses) { %>TPromise<HttpResponse<T, E>><% } else { %>Promise<HttpResponse<T>><% } %> => {
        const requestUrl = `${this.baseUrl}${path}`;
        const secureOptions = (secureByDefault || secure) && this.securityWorker ? this.securityWorker(this.securityData) : {};
        const requestOptions: RequestInit = {
            ...this.mergeRequestOptions(params, secureOptions),
            method,
            body: body ? this.bodyFormatters[bodyType || BodyType.Json](body) : null,
            signal: cancelToken ? this.createAbortSignal(cancelToken) : void 0,
        }

        return fetch(requestUrl, requestOptions).then(async response => {
            const data = await this.safeParseResponse<T, E>(response);
            if (cancelToken) {
                abortControllersMap.delete(cancelToken);
            }

            if (!response.ok) throw data
            return data
        })
    }
}

What do you think @ApacheEx @emagnier ?

[js2me]

How to use

const api = new Api();

api.user.currentUser({
  cancelToken: "currentUser"
})

api.abortRequest("currentUser");

const allDataCancelToken = Symbol()

api.username.allData("js2me", "feed_key", {}, {
  cancelToken: allDataCancelToken,
})

api.abortRequest(allDataCancelToken);

[VincentVanclef]

How to use

const api = new Api();

api.user.currentUser({
  cancelToken: "currentUser"
})

api.abortRequest("currentUser");

const allDataCancelToken = Symbol()

api.username.allData("js2me", "feed_key", {}, {
  cancelToken: allDataCancelToken,
})

api.abortRequest(allDataCancelToken);

@js2me How does this work in the typescript-axios version?