Snapshot of Three Basic Differences Between Axios and Fetch

I have come across lots of resources using Axios over Fetch. I was exposed to Fetch when needing to consume API’s, so to see so many videos using Axios in the beginning of my learning was confusing. Now I’m starting my journey to understand it. I would like to share a few differences I currently understand and hope that it will help those who are beginning to learn Axios as well. I welcome any feedback and critiques. They keep me learning!

There are lots of differences between Fetch and Axios, but the most popular ones I’ve noticed is code syntax, error handling, and browser capabilities.

Code

fetch() is built into JavaScript. When it is used, fetch() receives a promise, then the promise must be parsed into JSON. The is what is in line 6.

Axios is a JavaScript library that needs to be added. You can do so using the command npm install axios, then importing it into the files where Axios requests will live. Axios will automatically parse the promise received into JSON, thus requiring one less line of code. Yes, it’s just one line of code, but that means one less line for a potential mistake.

The code between Axios and Fetch is very similar, but the benefits of using Axios can outweigh those of Fetch in long run.

Error Handling

When an error is present, Axios will reject the promise. If there is an error present while using Fetch, the promise is still resolved and not rejected. A fetch will only reject a promise when the request was unable to be completed.

Browser Capabilities

Axios is supported on all of the major browsers, whereas Fetch is only supported in Chrome, Firefox, Edge, and Safari. Using Axios adds the extra layer of safety for developers to consume APIs without having to worry about browser capabilities.

Which To Use?

From what I’ve gathered, fetch is perfectly fine to use for small projects that will be using small APIs. Fetch is also great for beginners since there is the built-in fetch() method. There is no need to worry about installing Axios in the right directory and importing it into files.

After being comfortable with fetch, it would be good to become familiar with Axios. It can be more efficient with larger projects that require more intense APIs.

There are more difference between Axios and Fetch. Here is a website that lists them out for you to reference after some fetch() and Axios practice. I plan to continue learning the difference between the two until my understanding of them is fluid.