DEV Community

Fetch API is new old version of AJAX

Diona Rodrigues on May 04, 2022

If you started your developer career about a decade ago, you probably know how complicated it was to use AJAX in our web applications. However, by ...

Read full post

Camco • May 5 '22

Super helpful

Diona Rodrigues • May 6 '22

Thank you!

vetras • May 30 '22

Well, you are not wrong because this is pretty much a personal preference.
I just do not agree with you. 😎

Hiding async code with syntax sugar
It's not hiding, it's making it clear that it is async.

with async/await you have to wrap stuff in a try/catch
Only if you can handle the error and know what to do, otherwise it is better to let it bubble up.

Lastly, all the possible options you mention although correct, I think they miss the point.

If you have this:

fetch("someapi.com")
    .then(foo);
bar();

The point is to refactor into async/await but keep the exact same behaviour.
It does not matter much what that behaviour is on the example (functions don't even have a body here).

Cheers! 🍻 happy coding

vetras • May 30 '22

I don't think it is easier to read. Besides if you have this:

fetch("someapi.com")
    .then(foo);
bar();

The order of execution requires you to know that there is a promise here so that the functions are called in this order:
1- fetch
2- bar
3- foo

Xuan Chinh • May 5 '22

helpful

Diona Rodrigues • May 5 '22

Thank you!

Jakub Narębski • May 10 '22

Can you get progress information and partial results with the fetch API?

Diona Rodrigues • Jul 3 '22

Hey Jakub, I think I didn't get your questions. Can you explain it a little more?

Jakub Narębski • Jul 3 '22

With AJAX in onreadystatechange you can not only check whether you got full response, or an error, but also if you got partial response. It is useful for generating progress information if the response is slow (you receive results in spurts) - but of known final size, or for generating partial results.

Koas • Dec 25 '22 • Edited

Hi Jakub, for progress and partial results Server Sent Events (SSE - developer.mozilla.org/es/docs/Web/...) may be what you’re looking for.

Mehuge • May 10 '22

Typo in the last example?

getUserData().catch(err => console.log(err))

Diona Rodrigues • Jul 3 '22

Hey Mehuge, what do you mean by Typo?

Diona Rodrigues • Jul 3 '22

Hey @lukeshiru and @vetras, thanks for sharing your points. I think both ways are completely fine and I also think it depends on personal/team preferences.