Axios.js vs fetch() API

While building projects in JS we all need to make http request for exchanging data between two end points.Most of the projects I have build in JS I have used fetch() for handling my API requests.While going through a course on reactjs on udemy I saw the use of axios. Like every beginner who has only used fetch() for handling API request my question why was axios so special.It was also mentioned that axios is used in most of industry standards for performing http request but not fetch.

So to give an overview of what axios and fetch are:

Fetch():

It is an built-in method which is used for making HTTP requests.It is an upgrade from ajax method which is used in jquery.It provided a better approach for making HTTP requests in javascript.In other words it is used to fetch the response of a http request.

This is an example of get method in fetch()

Axios:

Axios is a library which is used for making HTTP requests for node.js and XMLHTTP requests from browser.

This is the syntax for axios get method.Here , I have created axios using create function with a base url in another file. Then it is imported and .get() is used for fetching data

When reading the definitions you will know that both fetch and axios does the same thing.So which one is better and why should be your question?

FETCH VS AXIOS

Fetch was a upgrade over ajax method in jquery.When I just started to use axios ,I thought it is doing the same thing what fetch was doing but with a different syntax.But when learning further , I understood in what way fetch and axios are different.

Lets compare fetch and axios with the following points:

1. Received Response
2. Error handling
3. Timeout handling

1. Received Response:

This difference is the easiest to understand . When you make a fetch request you have to use 2 then() or 2 awaits .But when using axios you just have to do that once.

The first .then() in fetch is used for receiving the information which has the response headers.When fetch() is used a promise is generated ,to resolve the promise we use .then(). Once we have the response we have to make the body of response received readable which is done using the json() method. This also returns a promise so we use .then() , to resolve that promise.

In axios , the response received is already in string format because axios takes care of it. It handles low level work in turn reducing our work.Thus , it returns one promise where the body of the response is readable by us.

final response of fetch's get method

Response of axios's get method

2.Error handling:

If we receive an error while accessing data through fetch() , the requests gets processed unlike ajax and shows error.In axios the request gets process and it is caught in the catch() block as an error.

Here , we see the request gets processed even if it has status of 404 , fetch treats the request received as a good response rather than a error and thus it does not enter the catch block.

Error Error:Request Failed with an error code of 404

Whereas , while using axios if there is an error or the status code falls in 4xx or 5xx category it is treated as an error.

3.Timeouts :

When you want to manually set a timeout in requests it is very easy to do so with help of axios , you simply add it in the headers section.But in fetch() there is whole lot of process to go through.

As you can see you simply have to add timeout in the headers body of axios. You can add timeout in fetch as well with the help of abortController(), it requires a lot more syntax and is not as simple as axios.

Not only these , axios has a slight edge over fetch in performing many different actions. If you want to see how much upload or download is done in your application axios has a built in onDownloadProgress method.

Sample code for showing onDownloadProgress

response of onDownloadProgress

The onDownloadProgress then returns a ProgressEvent object. With the help of size of the object and loaded object in the ProgressEvent object we could calculate how much percent of file is left to complete.
Axios can also cancel request and can add interceptors in the request for login , authentication purposes.

Thus , if you want to make a small scale app where data will be fetched and displayed you dont need to install axios library you could just use fetch(), but when you want to do a lot more with HTTP requests it is better to use axios then fetch().