The Almighty Axios

You know that feeling when you play a game and always choose the same character? Or when you’re about to chop up some onions and always end up reaching for your favorite Damascus steel chef’s knife? There’s just something about that character or knife that makes you feel comfortable knowing that it’s reliable and does everything. That’s the feeling I get when I use Axios. It’s simple, lightweight, reliable, and won’t blow a 3–1 lead while being the favorites to win the championship.

What is Axios?

Axios is a JavaScript library used to make http requests from node.js or XMLHttpRequests from the browser, and it supports the Promise API that is native to ES6 JavaScript.

Some benefits of Axios over Fetch

Syntactic sugar

The basic syntax used in Axios simplifies the request compared to the fetch() version.

axios(config)

Inside the config object, we have a bunch of configuration options we can modify:

Now we definitely do not need to use all of those options, a simple post request may look something like this:

If you prefer to use async/await with Axios:

Converts data to JSON automatically

Another great thing about Axios is that it automatically converts the data to JSON thus allowing us to cut down a step.

An equivalent fetch() request might look like:

It’s a small benefit but a benefit nonetheless.

Backwards Compatible

Axios is backwards compatible with Internet Explorer 11 (insert eyes emoji). Fetch() is only supported in the more modern browsers. Click here to see a list of browsers supporting fetch().

Response Timeout

Axios also supports response timeout directly inside the configuration object. This comes in handy if the server is having issues. Instead of forever loading, we can catch the timeout error and notify the user that the server is having issues.

Closing Thoughts

Axios is a handy library for handling http requests and has some benefits over the fetch api. These examples above are just a few, there are plenty more out there. Axios has superior error handling that throws network errors and also can use a progress bar to monitor loading large assets like tracking upload/download. While it is possible to replicate all of Axios ‘s features using Fetch, it is more work and can potentially slow us down. I would suggest giving Axios a try next time you do a fetch.