Summary

This context provides instructions on how to enhance the HTTP-request with Axios and TypeScript to make it more powerful by using Object-Oriented Programming (OOP).

Abstract

The webpage content begins with the basics of making HTTP requests in JavaScript/TypeScript, whether client-side or server-side, and mentions Axios as a popular choice for libraries. The content then introduces the use of an Axios Instance to create cleaner code by following the DRY principle. This is further expanded by creating an abstract HTTP Client class, with an interceptor for the response to destructure 'data' from the response. The author also mentions a real-world example of using this class for GET and POST requests, as well as creating a protected version with an Authorization header in the request. The final section summarizes the use of this approach to create cleaner code and centralize all API work.

Opinions

Using Axios is a more modern and popular choice over old-school XMLHttpRequest or the fetch function based on Promises for making HTTP requests.
Creating an instance of Axios helps maintain cleaner code and follows the DRY principle, allowing for the use of a baseUrl, common headers, and an Authorization header.
The HTTP Client class in this context is an abstract class, preventing the creation of an instance of this base class, and using the axios-instance created in its constructor with the base URL.
The use of response interceptors can make destructuring 'data' from the response more streamlined.
Adding an interceptor that takes two callbacks - _handleResponse and _handleError - can further improve the response handling in Axios.
The use of a private method _initializeResponseInterceptor in the constructor initializes the response interceptors.
For sensitive requests, creating a protected version of the HTTP Client class with an interceptor for the request is recommended, adding the 'Authorization' key in the headers.

Enhance Your HTTP-Request With Axios and TypeScript

Use OOP to make HTTP-request like a pro

Hello, world! Let me share some tips on how to boost your regular axios-instance to something powerful.

Let’s cover some basics so we know that we are on the same page. In JavaScript/TypeScript, we can make HTTP requests whether we are talking about client-side or server-side.

For client-side, you can use old-school XMLHttpRequest (please don’t do that), or modern the fetch based on Promises.

For server-side, the Node.js module https is always available for you.

Nevertheless, most of us use libraries and one of the most popular is axios.

Axios Instance

The first step for achieving cleaner code is an instance of axios. It helps us to follow the DRY principle because we use a baseUrl, share common headers between multiple requests, and attach the Authorization header.

It’s never too late to make things better, or at least try to do it.

HTTP Client

In the very beginning, we need some base http-client which will be extended to create the needed API.

It will be an abstract class (to prevent creating an instance of this base class), and its constructor will create an axios-instance. In our case, we get the base URL from the constructor. The result of axios.create will be saved to the class’s protected variable (it’s visible to its heirs only).

In 99% of cases, I have to destructure data from a response. So, let’s create an interceptor:

There is a lot of new code. Let’s discuss what is going on above.

In the constructor, we run the private method _initializeResponseInterceptor, which adds an interceptor to our response.

This interceptor takes two callbacks: _handleResponse and _handleError.

The _handleError is pretty clear — it just takes an error and forwards it.

The _handleResponse destructure data from a response.

Since we use TypeScript we have to help it to understand what is going on. That’s why we declare module axios at the top of the file. In that way, TypeScript will not complain when we use the response as pure data.

Real-World Example

It’s time to test our solution. We have some awesome API and have to make GET and POST requests. We create an instance of our HttpClient and pass the URL in super, and describe our requests:

Also, we can create a protected version of our MainApi where we execute all sensitive request with the Authorization header:

As you can see from the code above we added a new method _initializeRequestInterceptor. Each request will have the Authorization key in headers with this method.

Summary

I hope you found something new and useful. Of course, all this stuff can be replaced with functions and pure axios.create, but from my point of view, it will help you to write cleaner code and centralize all work with an API in one place.

Here you can find the second part of the current article.