CODEWITHSUNDEEP
javascriptasynchronousasync-await
pirmin_b
pirmin_b

Reputation: 27

combine multiple await variables into one array

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?

enter image description here

Upvotes: 0

Views: 1647

Answers (3)

Ilijanovic
Ilijanovic

Reputation: 14904

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());
}

Upvotes: 2

jvgaeta
jvgaeta

Reputation: 103

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.

Upvotes: 3

Paflow
Paflow

Reputation: 2347

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.

Upvotes: 1

Related Questions