What is difference between Axios and Fetch?

I am calling the web service by using Fetch but the same I can do with the help of Axios. So now I am confused. Should I go for either Axios or Fetch?

Fetch and Axios are very similar in functionality, but for more backwards compatibility Axios seems to work better (fetch doesn't work in IE 11 for example, check this post)

Also, if you work with JSON requests, the following are some differences I stumbled upon with.

Fetch JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

So:

Fetch's body = Axios' data
Fetch's body has to be stringified, Axios' data contains the object
Fetch has no url in request object, Axios has url in request object
Fetch request function includes the url as parameter, Axios request function does not include the url as parameter.
Fetch request is ok when response object contains the ok property, Axios request is ok when status is 200 and statusText is 'OK'
To get the json object response: in fetch call the json() function on the response object, in Axios get data property of the response object.

They are HTTP request libraries...

I end up with the same doubt but the table in this post makes me go with isomorphic-fetch. Which is fetch but works with NodeJS.

http://andrewhfarmer.com/ajax-libraries/

The link above is dead The same table is here: https://www.javascriptstuff.com/ajax-libraries/

Or here: enter image description here

According to mzabriskie on GitHub:

Overall they are very similar. Some benefits of axios:

Transformers: allow performing transforms on data before a request is made or after a response is received

Interceptors: allow you to alter the request or response entirely (headers as well). also, perform async operations before a request is made or before Promise settles

Built-in XSRF protection

please check Browser Support Axios

enter image description here

I think you should use axios.

One more major difference between fetch API & axios API

While using service worker, you have to use fetch API only if you want to intercept the HTTP request
Ex. While performing caching in PWA using service worker you won't be able to cache if you are using axios API (it works only with fetch API)

What is difference between Axios and Fetch?

Related

Recent Posts