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));
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));
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:
But Axios handles it, the way it is expected.
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.
Top comments (13)
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.
The interceptors are my major selling point.
Yea +1 for the interceptors!
Nice and quick overview, Ash! And just in time, thanks!
--
I wanted to learn more about
fetchpromise failing reasoning after your post. To share, heres a quote from MDN fetch:So, "bad news" is still "news" in
fetchimplementation.--
UPD: also,
axiosandfetchhave different cancellation API.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
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!
You completely missed the #1 reason I use axios... It just works everywhere.
Here is how fetch behaves in IE.
To be fair, you're comparing a platform API and a library. There are
fetchpolyfills, 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.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.
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...
~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
gothas a browser sibling: kyJust discussed this in other thread:
Cheers, also Axios got into the role due to React, I guess;