DEV Community

Axios vs Fetch

Wafa Bergaoui on July 03, 2024

Introduction In modern web development, making HTTP requests is a fundamental task. Whether you're fetching data from a server, submitti...

Read full post

José Pablo Ramírez Vargas • Jul 4 '24

Hmmm, so let's see about this: The current axios NPM package weighs 2MB. In exchange for adding a significant chunk of those 2MB, we get things like errors on HTTP non-OK responses, which is bad for me (and I bet others) because, for example, I want to collect the body respones for HTTP 400 responses to provide the feedback to users. HTTP response 401 is another example: I need it in order to redirect the user to a login screen.

Sure, I can always do a catch. But, with fetch, which costs 0 bytes and is also available in Node, I don't need the catch. I merely need to do a switch on the statusCode property, or an if on the ok property.

Now, interceptors. Do I download 2MB to get a JSON token added to the header? Or do I do this?

const response = await fetch(url, {
    headers: {
        'Authorization': `Bearer ${token}`
    }
});

"But then you'll have to do it for every data-retrieving function you have!" Eh, nope. Basic programming principles applied, I just create a myFetch function, a wrapper of the stock fetch function that injects the token every time, with just a couple hundred bytes. Response interception? Same thing.

So, is really axios a necessary, or even attractive enough package? Not all. Not for me, anyway. It adds very little value, IMHO.

Andrew Bone • Jul 4 '24

When axios was first being written fetch wasn't in the spec and then took a while to be everywhere. We had to use XMLHttpRequest everywhere and that really wasn't a nice experience.

Axios these days just uses fetch directly, though does still have XMLHttpRequest as a fallback.

All this to say I understand why axios exists and when people like something it tends to survive a long time even if it's not really needed anymore. I personally always use fetch directly.

Sheraz Manzoor • Jul 4 '24

Likewise, but I use nextjs, so I get all benefits of axios without even using it.

Mary Ahmed • Jul 5 '24

Why isn't axios needed for nextjs?

Mary Ahmed • Jul 5 '24

We've been using axios for all our API endpoints but all these comments have almost convinced me to change to fetch 😅 We're building a social network and performance really matters

Jesse Emana • Jul 5 '24

i'm switching to fetch right away

Thomas Bnt • Jul 4 '24

Hello ! Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');

Martin Baun • Jul 4 '24

I really enjoy fetch. I removed Axios from my latest React project. I always prefer to depend as little as possible on third party packages.

lokesh kumawat • Jul 7 '24

I just learned the conversion from fetch to axios and changed some of the routes in my project to
axios - async and await
and here everyone says fetch is better

Fernando Alves • Jul 5 '24

Great article!

Carlos Espinoza • Jul 5 '24

Thank you for the information.

Gary Fung • Jul 10 '24

Dumb article. Best practice in the serverless and especially Edge runtime world, is just stick with web standard fetch(). Axios is a dinosaur and keep making breaking changes, just move off.

Pawat Chomphoosang • Jul 10 '24

great information.

Rahul Vijayvergiya • Jul 4 '24

Thanks for the information.
Intestingly, I wrote similar article today :)
dev.to/rahulvijayvergiya/fetch-vs-...

Emmanuel (Emmo00) • Jul 5 '24

Most times, I feel axios is overkill in most cases. Fetch serves fine

Charles Jordan • Jul 8 '24

Excellent

Sheraz Manzoor • Jul 4 '24

Once again, Nextjs is very kind with us. We can achieve all the benefits of axios even using fetch API in Nextjs. Love You Nextjs. Nice article by the way.

Iain Simmons • Jul 5 '24

You don't get that for free. Next is overwriting the native fetch with its own implementation, which, while likely smaller than Axios, is still part of the relatively large bundle size you will have in any Next app.

It would probably be better than trying to roll your own with React and Axios though!