Section 1.1: Low-Level Encapsulation

Low-level encapsulation involves creating a new API that simplifies specific methods while limiting parameter exposure. Here’s an example code snippet:

export const post = (url, data, params) => {

return new Promise((resolve) => {

axios

.post(url, data, { params })

.then((result) => {

resolve([null, result.data]);

})

.catch((err) => {

resolve([err, undefined]);

});

});

};

In this code, the Axios post method is encapsulated to handle errors without requiring try-catch blocks. However, this method only exposes three parameters: url, data, and params. While these are adequate for many straightforward requests, they may not suffice for more complex scenarios, such as needing to set a longer timeout for slow responses.

For instance, in a specific situation, you might use:

axios.post("/submit", form, { timeout: 15000 });

There are various special cases to consider, including:

• Uploading forms with both data and files, necessitating the headers["Content-Type"] to be set to "multipart/form-data", along with the onUploadProgress attributes.
• Managing data races by using cancelToken or signal. Although some suggest using interceptors for this, it could lead to complications, especially when multiple dropdowns request the same options.

Some argue that such special interfaces are rare, but a project’s evolving requirements can introduce new complexities. To prepare for future enhancements, keep the encapsulation aligned with the original API to avoid cumbersome modifications later.

Section 1.2: Creating Axios Instances

You can encapsulate Axios by creating instances or defining a custom Axios class. Here's an example:

const createAxiosByInterceptors = (config) => {

const instance = axios.create({

timeout: 1000,

withCredentials: true,

...config,

});

instance.interceptors.request.use(...);

instance.interceptors.response.use(...);

return instance;

};

class Request {

instance: AxiosInstance;

interceptorsObj?: RequestInterceptors;

constructor(config: RequestConfig) {

this.instance = axios.create(config);

this.interceptorsObj = config.interceptors;

this.instance.interceptors.request.use(

this.interceptorsObj?.requestInterceptors,

this.interceptorsObj?.requestInterceptorsCatch,

);

this.instance.interceptors.response.use(

this.interceptorsObj?.responseInterceptors,

this.interceptorsObj?.responseInterceptorsCatch,

);

}

}

These methods allow for creating multiple Axios instances with different configurations and interceptors. However, maintaining a single Axios instance is advisable, as multiple instances can complicate code understanding and increase the onboarding time for new developers.

Section 1.3: Handling Multiple Configurations

If you have different configurations for various interfaces, define constants for each configuration. For example:

const configA = { /.../ };

const configB = { /.../ };

axios.get("api1", configA);

axios.get("api2", configB);

This approach is more intuitive and allows readers of the code to easily identify differences compared to using multiple Axios instances.

Section 1.4: Managing Multiple Interceptors

If different interceptors are needed, you can mount them on a globally unique Axios instance and selectively execute them based on a custom attribute:

instance.get("/api", { enableIcp: true });

In the interceptor, you can control logic execution based on this attribute:

instance.interceptors.request.use((config) => {

if (config.enableIcp) {

//...

}

return config;

});

This method allows for precise control over which interceptors are executed without cluttering the codebase.