APIs and Async Javascript: Outdated MDN reference? What's the difference between `fetch then` vs `async await`?

Javascript
1

Hello, I just got into the APIs part of Javascript

The instructor tells me to google about “how to use fetch with json”. So I did, but the mdn doc ( Using the Fetch API - Web APIs | MDN ) doesn’t mention anything about .then(). It seems to be updated and only use async await now. I’m pretty sure this will confuse a lot of ppl learning about it, because it confuses me too.

Shouldn’t this be updated with clarification? Now I have no idea whether I should use fetch then or async await.

2

Hey @Jonathan-Levi,

Both styles work because fetch returns a Promise so you can handle that with .then() or await. The difference is in readability and also how JavaScript engines can optimize them.

With .then(), the browser has to save extra info about where errors came from, which uses memory and can slow thing down.

I assume that’s why MDN doesn’t have it. Async is easier to read and it gives browsers more room to optimize. Still, it’s worth learning .then() first to understand how Promises work under the hood but in your own code, async/await is usually the better default.

There’s an blog post here you can check out regarding the performance angle of Async: Asynchronous stack traces: why await beats Promise#then() · Mathias Bynens

So overall, they’re kind of the same but at scale, Async is preferred if you’re doing a bunch of calls and handling a lot of Promises in your code.

// fetch style
fetch("https://example.com/data")
   .then(res => res.json())
   .then(data => console.log(data))
   .catch(err => console.error(err));

// versus async
async function loadData() {

  try {
    const res = await fetch('https://example.com/data');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

loadData();
3

I see. Thanks for the explanation.

But still, the MDN reference/screenshot in that lesson is outdated. I just thought it’s better to briefly explain/clarify about the current MDN reference (async await) being different to people who’s learning about it, to prevent confusion.

4

Oh ok right I see. Noted. Tagging @Tom_Chant for reference.

5

Thanks Jonathan
I’m aware that the async section could do with updating and it is on my list! I would like it to focus more on the modern async/await syntax.