Axios is a library that is often seen in javascript tutorials without much mention. But why is it used over the built-in fetch library when working in the browser? Fetch is perfectly fine, and serves its purpose when you need to make individual requests without much context. However, whenever someone finds themselves writing dozens of fetch requests in a web application, they find themselves writing duplicate code and configurations. In this article, I will be exploring the Axios javascript library, a library for making XMLHTTP Requests in the browser and other javascript environments (like Node!).
What Purpose Does it Serve?
Axios is a promise-based library that is commonly used to replace the fetch API for making network requests in the browser. The fetch API is also based on promises, but Axios offers a few benefits over fetches, such as automatic JSON transformations and better error handling. Also, writing a request with Axios feels much more intuitive than writing a request with the default fetch API.
How to use Axios in a Project
In order to use the Axios library in a project, it has to be downloaded on your computer. The project will have to use NPM, or Node Package Manager, to manage its javascript dependencies (You can also include a script HTML tag).
To install Axios, run these commands in your terminal.
Now all that should be left to do is import it into a project and start writing some network requests. A traditional fetch request ends up feeling bulky compared to an Axios request.
Traditional Fetch Request
Axios Request
The Axios code ends up taking less space while accomplishing the same task as the fetch request while being more readable. Axios also doesn't require an intermediary step of resp.json() and doesn't require setting the content-type header.
Better Error Handling
Axios also has much better error handling than fetch. If a fetch request fails because of a CORS error, it will throw a TypeError, but if the network request is valid but is a 404 response code, fetch will not throw an error. This is in contrast to Axios, who by default will throw an AxiosError type on a 404 response, as well as other HTTP error codes such as 401 unauthorized and 500 internal error. This means with Axios you find yourself writing less boilerplate code for catching seemingly common errors.
Axios Global Configuration
Axios also gives you the ability to pass a configuration to an object and reuse those options on subsequent requests. You can set things such as a base URL, content types, proxies, and headers. For cases like including custom headers for authentication, this makes writing subsequent requests much easier.
In summation, Axios is a library whose main benefits are quality of life and ease of development. However, this hasn't stopped it from becoming an extremely popular javascript library. For good reason, It offers so many improvements over fetch, on top of being able to be used in the browser and in node.
Top comments (0)