How to use axios versus fetch API

Axios and fetch() make requests to the server to get or post data in an asynchronous manner. In this shot, we will compare axios and fetch() and see how they can be used to perform different tasks.

Syntax

How to send a request (POST) with `axios`

How to send a request (POST) with `fetch`

Explanation

* `fetch()` uses the `body` property, whereas `axios` uses the `data` property to send data.

• The data in fetch() needs to be stringified, whereas the data in axios is a simple JavaScript object.

• The URL is passed as an argument to fetch(), whereas the URL is set in the options object for axios.

• The response object in fetch is also made into a string and needs an additional step to convert it into JSON format. However, in axios, the response object is already in the JSON format.

Response timeout

How to set response timeout with `axios`

How to set response timeout with `fetch`

Explanation

* `Axios` provides the `timeout` property that is used in the `config` object to set the number of milliseconds before the request is aborted.

• Fetch uses an AbortController object that allows us to abort the request using the signal property (read-only) of AbortController.

Backward compatibility

The USP of axios is its wide browser support. Old browsers like IE11 can also run axios without any issue. Fetch only supports Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+.

Multiple requests

To make multiple requests, `axios` provides the `axios.all()` method. We can use `axios.spread()` to assign the properties of the response array to different variables. ``` axios.all([ axios(options), axios(options) ]) .then(axios.spread((obj1, obj2) => { console.log(obj1); console.log(obj2); }) ```

To make multiple requests, fetch provides the Promise.all() method.

Promise.all([
  fetch(URL, options), 
  fetch(URL, options)
])
.then([obj1, obj2] => {
  console.log(obj1);
  console.log(obj2);
})

Installation and usage

`Axios` is a third-party HTTP client for the browser that allows you to send asynchronous HTTP requests. First, we need to install `axios` in our application with `npm` or `CDN`. `Fetch` is a built-in, ready-to-use API that doesn't require additional installations.