A convenient way to work with APIs in JS

Kirill Shelipov
Apr 30 · 3 min read

REST architecture has become very common among developers around the world. But it is not always clear how you can easily and conveniently set up work with the server. The creation of a small API client, a wrapper around the selected API is a simple and effective solution. You can use Axios, fetch, or any other API to communicate with the server — it doesn’t matter at all for creating the API client! In this article, I will use the Fetch API as an example.

Basic configuration

To quickly install the starter project template, you can use this repository: https://github.com/JIeCoRyI3/api-client-topic. We will use the service https://jsonplaceholder.typicode.com/ as our back-end.

In the basic template, we have sections for each endpoint that we connect to our application. At the end of the article, all endpoints will work for you.

Basic project template

Create an API-client

For convenient work with the server API, we will create a folder. All files for working with the server will be stored in this folder. Thanks to this, all settings will be encapsulated in one place, and our components will not even know about the implementation of methods inside our API client.

Let’s start with the basic configuration of the API client. In it, we will set the base URL where our methods will refer. Also here we will create a method for sending a request using the Fetch API and a method for creating an object with parameters for the Fetch API.

Basic config

Creation of endpoints

Now everything is ready to create our first method for working with the server. Let’s create an apiClient.js file, where we will connect our basic config and create an endpoint receiving a post.

Create an endpoint:

Creating method

Connect API-client to App:

Connect API to App

And displaying a response in the Endpoint component:

Endpoint component code

As you can see, all the logic for connecting to the server is hidden in our API client. When you click on the button, the server response is correctly displayed in our element.

Getting a response from the server

BUT! We can hide even more logic inside our API client! Let’s try to change our code so that the component receives a ready-made response body.

Refactored method

And update our method inside a component:

Refactored method

All is ready!

Now we can connect any endpoints to our API client. In this case, the components do not know about the implementation of the methods of the API client. All logic is encapsulated in one place.

Let’s create another POST request to see how our methods work with data.

Endpoint method:

Connecting to App:

Result:

Result of a POST request

Conclusion

As you can see, we easily set up the API by creating a wrapper around the Fetch API. We can easily use this approach for any other API. Also, we can easily split and scale our apiClient. You can see an example of this in the finished project at the link: https://github.com/JIeCoRyI3/api-client-topic/tree/ready-project. But first, try connecting the rest of the endpoints yourself, and also think about how you could handle errors.

This approach makes it easy to test the API client because we are working with a simple object. Also, all the logic of work is stored conveniently in one place and we can always quickly edit what we need.

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Kirill Shelipov

Written by

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store