DEV Community

Cover image for Axios or Fetch?- in 2 minutes
thatIITgirl
thatIITgirl

Posted on

Axios or Fetch?- in 2 minutes

Ever wondered why developers are going for Axios over fetch? As we are aware both are the means to deal with HTTP or XMLHttp requests, Both are capable of making all types of API calls (get, post,put.. etc.). Both are based on Promise API which is native to ES6. But what are the major points to be noted?

First, .fetch() has a two-steps process while handling JSON data. The first makes the actual request and then the second is to call the .json() method on the response.

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

fetch(url)
.then(response => response.json())
.then(data => console.log(data));
Enter fullscreen mode Exit fullscreen mode

As a good developer, our main aim is to minimize the code. Axios deals it with a single line.

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

axios.get(url).then(response => console.log(response));
Enter fullscreen mode Exit fullscreen mode

image by gifmaker
Second is, Error handling. Logically if .fetch() gets an error it would enter the .catch() block and should return but, it eventually executes the next then() in chain. see below:

Alt Text

But Axios handles it, the way it is expected.
Alt Text

it returns from catch, no more .then() chaining.

So, .fetch() method is a great way of getting HTTP requests native in ES6, but there are just few gotchas, that could be dealt by these third party libraries.
image by gifmaker

Top comments (13)

Collapse
 
kosich profile image
Kostia Palchyk • Edited

Nice and quick overview, Ash! And just in time, thanks!

--

I wanted to learn more about fetch promise failing reasoning after your post. To share, heres a quote from MDN fetch:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

So, "bad news" is still "news" in fetch implementation.

--

UPD: also, axios and fetch have different cancellation API.

Collapse
 
sgoulas profile image
sgoulas • Edited

This post seems to miss the biggest differences. Axios automatically converts fetched data to a JSON where fetch requires the dev to do it. Also axios implements cancelable requests by exposing a cancel function where with fetch the dev has to override the API to cancel the request.

Also, with axios you get easy time out configuration and http interceptors on requests and responses.

Collapse
 
brogrammerben profile image
Ben

The interceptors are my major selling point.

Collapse
 
fasani profile image
Michael Fasani

Yea +1 for the interceptors!

Collapse
 
awesomeironman profile image
Cyrus Gracias

When we add another library it increases customers JS code download time
So we are basically making our site slow for customers using slower connections
And for what? Developer experience? That sounds bad to me

Collapse
 
aidurber profile image
Andrew Durber

It's 4.4KB min+gzip so it's pretty negligible. But as @sgoulas mentioned, there are additional benefits.
If you want a similar API, Jason Miller (@developit) created a tiny version (884b min+gzip): github.com/developit/redaxios. It's missing interceptors but still cool.

But with that argument, you could dismiss every frontend framework as bytes vs developer experience.

Developer experience is not to be understated. But I 100% agree with your sentiment!

Collapse
 
waylonwalker profile image
Waylon Walker

You completely missed the #1 reason I use axios... It just works everywhere.

Here is how fetch behaves in IE.

fetch in IE

Collapse
 
kosich profile image
Kostia Palchyk

To be fair, you're comparing a platform API and a library. There are fetch polyfills, like github's fetch that deliver wider support. Though if one is sharing code with nodejs -- they'll have to install another library for fetching serverside.

Collapse
 
waylonwalker profile image
Waylon Walker

Great point. I ran into some issues with a polyfill early on, and went back to axios as I am comfortable with it and really don't like opening IE if I can avoid it.

Thread Thread
 
kosich profile image
Kostia Palchyk • Edited

Totally understandable, hehe 🙂
I'm currently trying unfetch on my new project, not sure where that leads to.
And, as always, theres also a third school of thought: ky (haven't tried it).
UPD its based on fetch, so not really a 3rd, 2.5 rather...

Collapse
 
okbrown profile image
Orlando Brown • Edited

~Try using Got. npmjs.com/package/got and then compare that to Axios.~ (strike through?)

Just remembered it does not support browser. Axios FTW lol

Collapse
 
kosich profile image
Kostia Palchyk

got has a browser sibling: ky
Just discussed this in other thread:

And, as always, theres also a third school of thought: ky (haven't tried it).
UPD its based on fetch, so not really a 3rd, 2.5 rather...

Collapse
 
hemant profile image
Hemant Joshi

Cheers, also Axios got into the role due to React, I guess;