Don't get expected data with fetch/async/await

Question

Coming from Jquery $.get, I am trying to rewrite a function that gets data in a json. So far, this is what I do:

async function get_highlights(){
  const mirespuesta = await fetch("/api/v1/gethighlights/"+network_number)
  .then(response => {
      if (!response.ok) {
          throw new Error("HTTP error " + response.status);
      }
      return response.json();
  })
  .then(json => {
      console.log(json) // --> here, I get the correct dara
      return json;
  })
  .catch(function () {
      this.dataError = true;
  })
  return mirespuesta
} // but I don't get that data returned

But I just get this when I call the fuction:

that has the values, but I can't get them returned or used on the main scope of my application.

What am I doing wrong?

Don't mix `await` with `.then()`. – Pointy Feb 18 '21 at 16:17 — Pointy, Feb 18 '21 at 16:17

score 6 · Answer 1 · answered Feb 18 '21 at 16:20

The problem is that you never return the promise chain from your function. So your async function's return value is a promise fulfilled with undefined, just like a non-async function with no return returns undefined.

There's another issue with that code: If you're using an async function, generally it's best to use await rather than .then, .catch, etc. Also, don't catch rejection in the function; instead, let the caller handle it so it knows something went wrong.

So for instance:

async function get_highlights() {
    const response = await fetch("/api/v1/gethighlights/"+network_number);
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.json();
}

But if you really want to handle errors inline:

async function get_highlights() {
    const response = await fetch("/api/v1/gethighlights/"+network_number);
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    try {
        return await response.json();
    } catch { // Note: ES2019 allows optional `catch` bindings 
        this.dataError = true;
    }
}

but again I don't recommend that, because the caller has to check to see whether they got data or undefined when the promise is fulfilled (or check dataError, I guess :-) ).

Side note: Note that in the first example, which doesn't have a try/catch, I did return response.json(); but in the second example, where the return is inside a try/catch, I did return await respohnse.json();. The reason is that when returning a promise at the top level of the function, there's no effective difference between return somePromise and return await somePromise, but that's not true if the code is in a control block like a try/catch. Having the await ensures that our catch block is executed if the promise is rejected. Not having it wouldn't ensure that.

Thank you very much for that super detailed answer! I feel like I have really learnt important stuff that I was missing :) The side note is amazing. Literally saved for further reference. — Juanse Cora, Feb 18 '21 at 17:25
@JeremyThille I'm imagining the special kitchen cabinet where all the SO coffee mugs are stored — Pointy, Feb 18 '21 at 17:56
@Pointy - Sadly, they stop sending them after the first couple. :-( I have a grand total of three, and one of them I had to sort of shame them into sending. — T.J. Crowder, Feb 18 '21 at 22:24

score 3 · Accepted Answer · edited Feb 18 '21 at 16:45

3

This is what your function should look like:

async function get_highlights() {
  const mirespuesta = await fetch("/api/v1/gethighlights/"+network_number);
  if (!mirespuesta.ok) {
      throw new Error("HTTP error " + mirespuesta.status);
  }
  return mirespuesta.json(); 
}

But, most importantly this is how it should be used:

const mydata = await get_highlights();

An async function ALWAYS returns a promise, and your question probably becomes a dupe of this question

edited Feb 18 '21 at 16:45

T.J. Crowder

1,031,962
187
1,923
1,875

answered Feb 18 '21 at 16:20

Adam Jenkins

51,445
11
72
100

It gives me an error in the important part: ''await' is only allowed within async functions and at the top levels of modules' – Juanse Cora Feb 18 '21 at 17:43
1

@JuanseCora that’s because the function where you call get_highlights needs to be async – Adam Jenkins Feb 18 '21 at 17:49

score 0 · Answer 3 · answered Feb 18 '21 at 17:32

0

Another way would be to use just await twice

try {
  const mirespuesta = await (await fetch("/api/v1/gethighlights/"+network_number)).json();
} catch {
  throw new Error(response.status);
}
return mirespuesta;

answered Feb 18 '21 at 17:32

Rojo

2,749
1
13
34

Don't get expected data with fetch/async/await

3 Answers3