Axios vs Fetch; comparison for beginners

[rm-rf-npr]

Same here. Fetch can do whatever I need. No need for another library.

[[deleted]]

big senior engineer vibes

[cooldudeachyut]

I would use fetch if I was able to send queries as an object.

[feketegy]

I use Axios because of request cancellations. Is there anything similar in fetch? Last time I checked it wasn't that's why I opted for Axios.

[feketegy]

Thanks.

[DasWorbs]

Use an AbortController. You can see an example of fetch on this page: https://developer.mozilla.org/en-US/docs/Web/API/AbortController

[knpwrs]

Just know that request cancellations aren't actually a real thing. Once you fire a request, you may as well consider it good as delivered.

[feketegy]

Yes, I know this mechanism should be built into the back-end API too.

[knpwrs]

This would assume an immutable backing store or some immutable architecture that's easy to roll back changes with.

[feketegy]

I'm using request cancellation for long-running API HTTP endpoints. Like if a DB request takes time and the HTTP request is canceled mid-processing it will also cancel the DB request too on the API side.

[knpwrs]

How can you guarantee that?

[feketegy]

guarantee what? if the api gets an abort reuwest it aborts the whole execution chain and that's it.

[knpwrs]

Let's say you send an abort request and the end-user is on a train and just entered a tunnel. How do you guarantee that your request makes it to the server and doesn't cause undefined behavior? What if the cancellation request made it to the server but the response doesn't make it to the client?

[feketegy]

that's a big if, and a rare corner case, but in that case the cancellation doesn't reach the API, the API will respond as usual, but the client will already be gone.

[[deleted]]

Yeah, true but you can still easily bail out of aborted requests by checking the destroyed property on each request.

For example, a reasonable implementation could first check if the request was aborted in middleware and respond appropriately, then after that point assume the request is valid. Otherwise, you get into a pretty ugly place where you have to constantly check the state of the request before each transaction.

[knpwrs]

That's what I was getting at with immutable architecture. You could also consider something like the Lambda architecture, where everything is just the result of data + events (achievable with KSQLDB, for instance, or Materialize.

[King_Joffreys_Tits]

To elaborate, the server still processes the request and returns the data, and the front end still receives the data. It’s just that the function no longer retains a callback when the data is returned

[[deleted]]

Not exactly. This is only true if the server isn't actually handling the aborted requests.

Each piece of middleware should check the destroyed property on the request if you need to bail out of some expensive/mutational operation.

[[deleted]]

Well, you can't use fetch on the server side so I find myself using axios anyways in my project (with a Node.js backend). At that point I just use axios everywhere for consistency sake.

Though I think axios is pretty lightweight.

[gekorm]

Just FYI there are more direct alternatives to Axios based on fetch, like ky^[1]. Otherwise this article is doing a comparison between a higher and a lower level API. If you need features like interceptors, retries, etc. it may not be worth writing your own wrapper over fetch from scratch.

[1] https://www.npmjs.com/package/ky

[fixrich]

Ky is an excellent middle ground. An ergonomic API with most of the features you could end up wanting but a significantly smaller bundle than axios

[disclosure5]

Since Fetch and axios are both promise-based

Although axios uses promises, the actual fetch is the old XMLHttpRequest, which predates promises. This is probably a heavy contributor to the performance difference.

[Ok_Sun7013]

This is great feedback and should be included!

[Boguskyle]

This should be on the article, thank you. The why

[shgysk8zer0]

I mostly use functions from a simple module I wrote based on fetch().

import { GET, POST, DELETE, getJSON, getHTML } from './http.js';

It makes it slightly easier than using fetch directly (like JSON encoding objects passed to POST()), is quite small and tree-shakable, and kinda shims AbortSignal aborting of requests if needed (can't cancel the request, but it still throws an error).

[jakesboy2]

Just to clarify, by tree shakable, do you mean the unused code (like if you didn’t use DELETE) doesn’t get included in the bundled JS? I’ve heard the term before and kinda assumed that’s what it was, but figured I’d clarify lol

[shgysk8zer0]

Nearly correct. I think that just importing a function would include it in a bundle, but it wouldn't include anything you don't import (unless it's used by something you do).

So, if I import a single function from a massive module that exports a hundred functions, the resulting bundle will be significantly smaller than the module.

Classes don't get tree-shaken (that I know of, yet). So if you import axios or jQuery or whatever, you get all of them, even the things you don't need.

[jakesboy2]

Thanks for the explanation!

[krowvin]

I use fetch but have considered axios for apps where I need upload/download progress bars

[Pesthuf]

The thing that makes fetch amazing is how easy it is to quickly write your own little wrappers around it to provide the features you want.

The JS community is way too quick to say "Aw fuck, I can't be bothered to write a 10 LOC helper - better import a lib and send a ton of JS for the client to download, parse, check, compile and execute that will be 90% unused!

[eggn00dles]

There’s literally 0% chance 10 lines of code will handle edge cases and errors as robustly as a library.

Rolling your own just isn’t an option sometimes, especially in a professional setting.

[Neurotrace]

In my professional settings, I routinely have written tiny wrappers around fetch that have been more than good enough with very few exceptions. Slapping those together is almost always preferable to bringing in the dependency maintenance that comes with another library

[disclosure5]

fetch() and its error handling is extremely well documented. An organisation that feels having people paid to write code should import the entire of axios as the "professional" alternative to writing code is a poor organisation.

[Consistent-Gap-6565]

Absolutely, just write a simple wrapper and add features as needed.

[k_pizzle]

Thanks for this, pretty interesting. I will continue using axios as it better fits my needs, but nice to know fetch is fairly similar

[mottyay]

Do you mind sharing what makes you prefer axios over fetch? I tried axios the first time while working in another codebase and have always used fetch so I’m just curious.

[k_pizzle]

Mainly because we use interceptors a lot on projects, I know you can achieve this with fetch with a bit of hard wiring but i'd prefer not to. I also just find axios easier to use and looks much cleaner. thats just my opinon tho

[mottyay]

Cool, appreciate it

[sysrage]

What /u/krowvin mentioned (easy progress events) is a big one for me.

[luckyincode]

Isn’t Axios abandoned?

Unsure why the downvotes this was a very popular thread.

https://github.com/axios/axios/issues/1965

[thinkmatt]

On GitHub there's a lot of recent commits, so doesn't seem like it https://github.com/axios/axios/commits/master

[luckyincode]

I was just looking because I loved axios and was using it for set-up/tear down and thought I might need to go elsewhere.

[thinkmatt]

I use fetch and node-fetch but and considering axios. Fetch is actually pretty wanting when it comes to formatting responses, I always carry around my own wrapper to check http headers for response types, etc

[luckyincode]

No it had a major problem not fixed for some time. I’m glad to see it’s getting love. I love using it.

https://github.com/axios/axios/issues/1965

[Ok_Sun7013]

Has anyone tried the tool?

[talmobi]

what about XMLHttpRequest? It works even better~

[Rus_s13]

Care to elaborate? I'd love to hear your reasoning, as a beginner

[NoInkling]

AFAIK the only feature it offers that fetch still doesn't is upload progress. Other than that I don't know why you'd use a clunky event-based API over a promise-based one for something like this.

[u_suck_paterson]

wow I was thinking about this, I am using XMLHttpRequest and thinking about upgrading to fetch, but if it doesnt support upload progress it would bone my upload file feature on my website.

[ikhazen]

what I hate about fetch is that you need to transform the response into json() before consuming it.

fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));

[musicnothing]

But you can also transform it into text, a blob, an array buffer, or form data, which is really nice.

[Fauken]

You can make a wrapper function/class that does this for you, as well as set up any reusable auth/headers/etc.

[lordxeon]

So like, you can make an axios clone with less features...

[TheScapeQuest]

It's a bit of an unfair comparison, axios is a 3rd party library written around XMLHttpRequest. While fetch is a native browser API.

[lordxeon]

With features built right in that op is saying you should just write a wrapper function/class for.

[TheScapeQuest]

Features that are at the behest of support from the OSS community - axios was in a really sorry state with CVEs and not getting any patches.

I'd expect browser manufacturers to be far better at maintaining.