combine multiple await variables into one array

Question

Im having trouble combining two async variables into one array:

My code:

async function fetchMenus ({actions, state}) {
      return actions.theme.fetchToken().then(async () => {
        const items = await fetch("url", {
          method: "GET",
          headers: {
              Authorization: `Bearer ${state.theme.token}`,
          },
        });
        const menu = await fetch("url", {
          method: "GET",
          headers: {
              Authorization: `Bearer ${state.theme.token}`,
          },
        });

        return [menu.json(), items.json()];
      });
    };

As a response i recieve 2 fulfilled promises, but i want to receive the results. How can i solve this?

the syntax is incorrect why you are using .then with await in line #2 — deathstroke
– deathstroke, Commented May 28, 2020 at 8:04
yes actually the await was wrong, but ufortunately it doesnt solve the issue — pirmin_b
– pirmin_b, Commented May 28, 2020 at 8:06
You already know how to use await. Why not use it on the promises for the json body as well? — Bergi
– Bergi, Commented May 28, 2020 at 8:09

jvgaeta · Accepted Answer · 2020-05-28 08:14:33Z

3

You just need to await your response json.

async function fetchMenus ({actions, state}) {
      return actions.theme.fetchToken().then(async () => {
        const items = await fetch("url", {
          method: "GET",
          headers: {
              Authorization: `Bearer ${state.theme.token}`,
          },
        });
        const menu = await fetch("url", {
          method: "GET",
          headers: {
              Authorization: `Bearer ${state.theme.token}`,
          },
        });
        const itemsJson = await items.json();
        const menuJson = await menu.json();
        return [menuJson, itemsJson];
      });
    };

Edit: I agree with other posters about using Promise.all as well.

edited May 28, 2020 at 8:14

answered May 28, 2020 at 8:12

jvgaeta

1034 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bergi Over a year ago

I would recommend to do the const itemsJson = await items.json(); before starting to fetch the second response, though.

jvgaeta Over a year ago

Curious, what's the reasoning behind that recommendation?

Bergi Over a year ago

It's just weird to have to two requests interlaced like that. I would even recommend using a helper function that can be called twice to remove the code duplication.

jvgaeta Over a year ago

Ok, yeah I agree. I was wondering if there was some secret low-level knowledge you had of how fetch I/O works that made this suboptimal. :p

Ilijanovic · Accepted Answer · 2020-05-28 08:18:50Z

2

There are mistakes for example .json() is async too.

Also using Promise.all() is a bit faster because your API calls doesnt seem to depend on eatch other.

Because you return an array you can directly write return await Promise.all(menu.json(), items.json()) because Promise all returns an array

async function fetchMenus({ actions, state }) {
  let token = await actions.theme.fetchToken();
  let [items, menu] = await Promise.all(
    fetch("url", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${state.theme.token}`
      }
    }),
    fetch("url", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${state.theme.token}`
      }
    })
  );
  return await Promise.all(menu.json(), items.json());
}

edited May 28, 2020 at 8:18

answered May 28, 2020 at 8:13

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Comments

Paflow · Accepted Answer · 2020-05-28 08:09:14Z

1

You can do

Promise.all(fetchMenus(parameters).result).then((results) => {
 ... work with results
});

Promise.all puts an array of promises into a new promise, so to say.

It is typically used after having started multiple asynchronous tasks to run concurrently and having created promises for their results, so that one can wait for all the tasks being finished.

answered May 28, 2020 at 8:09

Paflow

2,3975 gold badges34 silver badges58 bronze badges

Collectives™ on Stack Overflow

combine multiple await variables into one array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related