Axios-Core-Api + Object-Oriented JavaScript = Love
There was a lot I didn’t know in my early days as a developer. More importantly, there was a lot that I thought I knew, but didn’t. I thought I knew how to call an API from my javascript applications. I was working a lot with React.js, which uses classes, so I was sure that I knew what OOP was. In this article, I’m going to show you two approaches to setting up event handlers to call a hypothetical “users” API from a javascript application.
Approach number one will be the way I would have done things early in my career. It’s the way that I learned by building small applications based on tutorials and beginner courses.
Approach number two will be the way that I write API calls now. These are techniques that I have picked up while building large production applications that need to be readable, maintainable, and scaleable for future developers (or future me). After showing you both approaches, I will show you how to go from one to the other by building a single client-side API instance that you can pass around your application with ease.
Approach #1
This approach is okay when you have a small application with only a few API calls. We have two event handlers that both call the same API. They are sharing the same axiosConfig and basePath that are defined at the top of the file. But what happens when we want to make an Axios request from a different file? We’ll have to pull our axiosConfig and basePath out and export them to be used in other files. This isn’t a huge deal, but it can become cumbersome once we start making api calls in 10 different files. Furthermore, we are putting the business logic of our api calls inside of our event handlers.
Let’s look at the next approach.
Approach #2
Now we are talking! Look at how much cleaner this is. We are importing a baseApi and using it’s internal properties and methods to interact with our API. You can already see how sharing this across multiple files, or even projects, would be dead simple. Below, I will show you how to setup the baseApi.
The first thing we will do is install the axios-core-api package from npm or yarn.
Disclaimer: I wrote axios-core-api. It is a simple, single file, package that handles the creation of an Axios instance, and the business logic of interacting with that instance.
Using npm
npm install axios-core-api
Using yarn
yarn add axios-core-api
Next, we need to setup our client-side api class. In a directory called /api, create an index.js file. In this file, we will create a class called BaseApi, and pass an instance of our axios-core-api into it’s constructor.
The ApiCore expects one argument. We will need to pass in an axiosConfig. Let’s create a new file called axiosConfig.js and export the config that we defined in approach number 1. Then, we will pass it in when we create the ApiCore instance in index.js.
Next, let’s add a basePath for the API to send requests to.
Note that we are passing the apiCore and basePath into the constructor of the BaseApi, and then assigning them to private properties (defined with a leading “_”). This is because we don’t want developers interacting directly with the _apiCore and _basePath. In the next two snippets we will put the final pieces together and you’ll see how we will actually interact with the BaseApi.
Create a file called UsersApi.js. In this file, we will create a class to hold all of the methods we will need to interact with the users API. This class will take in the apiCore and basePath from the BaseApi, assign them to private properties, and use them inside of the methods that we create to make our Axios calls.
Now we have a class that defines all of the business logic for any CRUD operation that we would want to perform for users. Each method uses a single Axios instance and shares the same basePath. Let’s go back to our index.js file and include this UsersApi as part of our main BaseApi class.
That’s it! After all of that work, we now have an api instance that we can pass around our app to be used anytime we need to make an api request.
Let’s take another look at approach number 2 to see our API instance in action.
Approach #2 - Reloaded!
As you can see, our event handlers are much cleaner. All of that business logic with Axios configs and paths is gone, and we are left with readable, maintainable, scalable code.
The axios-core-api package is written in TypeScript and includes typings for you to use in your TypeScript projects. If you have any feedback or suggestions to make the package better, please comment or contact me at brybrophy@gmail.com.