Templates for axios with the ability to pass a custom instance

[msklvsk]

Have someone by any chance created a template that uses an axios instance instead of fetch? or are there any plans to implement it in-project? Just asking before starting to implement one myself.

[js2me]

I use templates with ky and qs and I think it is not a problem to create templates for axios http client

[js2me]

I think it is not needed to implementing in project because it will not be a silver bullet for everyone

[msklvsk]

Turns out it’s pretty easy to make a hack. If you don’t plan to support axios in this project then I guess this issue can be closed...

index 2a371ca..140095a 100644
--- a/templates/default/data-contracts.eta
+++ b/templates/default/data-contracts.eta
@@ -1,3 +1,5 @@
+import { default as defaultAxios, AxiosInstance, Method } from 'axios'
+
 <%
   const { modelTypes, utils } = it;
   const { formatDescription, require } = utils;
diff --git a/templates/default/http-client.eta b/templates/default/http-client.eta
index 616f8f3..fc75d26 100644
--- a/templates/default/http-client.eta
+++ b/templates/default/http-client.eta
@@ -47,7 +47,7 @@ export class HttpClient<<%~ apiConfig.generic.map(g => `${g.name} = unknown`).jo
         referrerPolicy: 'no-referrer',
     }
 
-    constructor(apiConfig: ApiConfig<<%~ apiConfig.generic.map(g => g.name).join(', ') %>> = {}) {
+    constructor(apiConfig: ApiConfig<<%~ apiConfig.generic.map(g => g.name).join(', ') %>> = {}, private axios: AxiosInstance = defaultAxios) {
         Object.assign(this, apiConfig);
     }
 
@@ -119,7 +119,7 @@ export class HttpClient<<%~ apiConfig.generic.map(g => `${g.name} = unknown`).jo
         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 = {
@@ -128,10 +128,10 @@ export class HttpClient<<%~ apiConfig.generic.map(g => `${g.name} = unknown`).jo
             body: body ? this.bodyFormatters[bodyType || BodyType.Json](body) : null,
         }
 
-        return fetch(requestUrl, requestOptions).then(async response => {
-            const data = await this.safeParseResponse<T, E>(response);
-            if (!response.ok) throw data
-            return data
+        return this.axios.request<T>({
+            url: requestUrl,
+            ...requestOptions,
+            data: body,
+            method: requestOptions.method as Method
         })
     }
 }

[js2me]

@msklvsk thanks for sharing templates changes, it can help someone who wants to use axios!

[Ahriana]

ty, i needed this. mybe native support would be nice. thanks either way @msklvsk

[mixalbl4-127]

@js2me +1 this is a better for frontend devs, maybe need to add native --axios option for it?

[js2me]

@msklvsk @mixalbl4-127 @Ahriana
If it really needed I'll add the --axios option at the next patch release!

[mixalbl4-127]

My varian of dirty hack for axios for --modular --single-http-client", works for me but without ContentType and other feautures :(

import { Api as OriginalApi } from "@/api/Api";
import { FullRequestParams } from "@/api/http-client";
const fake: any = {
    request: (reqParams: FullRequestParams) =>
        axiosInstance.request({
            url: reqParams.path,
            method: reqParams.method as Method,
            params: reqParams.query,
            data: reqParams.body
        })
};
const Api = new OriginalApi(fake);
export { Api };

@js2me
One more think, please make --single-http-client works with axios too, for ability to send custom axiosInstance