Resolve promise.all inside a useEffect

Question

I have a simple useEffect in my component to fetch data from 3 API calls:

  useEffect(() => {
    Promise.all([
      fetch(`${baseUrl}/counts?entity=color`),
      fetch(`${baseUrl}/counts?entity=brand`),
      fetch(`${baseUrl}/counts?entity=category`)
    ]).then(([x, y, z])=> {
        console.log(x.json(), y.json(), z.json());
      });
  }, []);

I'm expecting the actual data I get from the API so that I can use it in my UI, but instead I'm getting this:

I've also tried doing this:

  useEffect(() => {
    Promise.all([
      fetch(`${baseUrl}/counts?entity=color`),
      fetch(`${baseUrl}/counts?entity=brand`),
      fetch(`${baseUrl}/counts?entity=category`)
    ]).then(responses => responses.map(r => r.json()))
      .then(([x, y, z])=> {
        console.log(x, y, z);
      });
  }, []);

I see the desired value inside PromiseResult, but I'm not sure how to extract it:

What am I doing wrong here. How do I access the array in my code?

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Robin Zigmond, Apr 16 '23 at 13:58
I think you already understand at least a little about handling asynchronous code with Promises, but you seem to not be realising that the `json` method on a `fetch` result *itself* returns a Promise. In your case the simplest solution is probably to change `responses => responses.map(r => r.json())` to `responses => Promise.all(responses.map(r => r.json()))` — Robin Zigmond, Apr 16 '23 at 14:01

score 3 · Accepted Answer · answered Apr 16 '23 at 14:01

The issue is that .json returns another promise, so you'd need to call .then on it to get the eventual value. Or since you're doing multiple, you'd need to combine it with Promise.all, and then call .then on that.

One possibility is to tweak your .map attempt so that it has an additional Promise.all:

Promise.all([
  fetch(`${baseUrl}/counts?entity=color`),
  fetch(`${baseUrl}/counts?entity=brand`),
  fetch(`${baseUrl}/counts?entity=category`)
]).then(responses => {
  return Promise.all(responses.map(r => r.json()))
})
.then(([x, y, z])=> {
  console.log(x, y, z);
});

But that does have the downside that all of the fetches must get far enough along that they resolve, before any of them can call .json. This may slightly delay finishing things. So another possibility is to set up all of the work up front, and only call Promise.all with those final promises.

Promise.all([
  fetch(`${baseUrl}/counts?entity=color`).then(val => val.json()),
  fetch(`${baseUrl}/counts?entity=brand`).then(val => val.json()),
  fetch(`${baseUrl}/counts?entity=category`.then(val => val.json()))
]).then(([x, y, z])=> {
  console.log(x, y, z);
});

With that version, each of the fetches will go at whatever pace it can manage, and will convert itself to json as soon as it can. Then once all of them are finished, the combined promise resolves.

score 1 · Answer 2 · answered Apr 16 '23 at 14:34

You could combine your all fetch call and map() to generate an array of promises to easily loop the data:

const baseUrl = "https://jsonplaceholder.typicode.com";

  useEffect(() => {
    const urls = [`${baseUrl}/todos/1`, `${baseUrl}/todos/2`, `${baseUrl}/todos/3`];

    const fetchData = async () => {
      try {
        const responses = await Promise.all(urls.map(url => fetch(url)));
        const data = await Promise.all(responses.map(response => response.json()));
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

Andrew Parks · Answer 3 · 2023-04-16T14:22:44.000

0

If you want to use await instead of then, this is how I would refactor your code:

useEffect(async () =>
  console.log(...await Promise.all(
    ['color','brand','category']
      .map(async i => (await fetch(`${baseUrl}/counts?entity=${i}`)).json())))
, []);

edited Apr 16 '23 at 14:22

answered Apr 16 '23 at 14:12

Andrew Parks

6,358
2
12
27

score 0 · Answer 4 · answered Apr 16 '23 at 15:03

Write a getByEntity function that wraps a single fetch operation, then mao over the list of entities that you need to retrieve:

const baseUrl = '...';

// outside of your component
async function getByEntity(entity) {
  const response = await fetch(`${baseUrl}/counts?entity=${entity}`);
  const data = await response.json();
  return data;
}

// inside your component
useEffect(() => {
  Promise.all(
    ['color', 'brand', 'category'].map(getByEntity)
  ).then(([x, y, z])=> {
    console.log(x, y, z);
  });
}, []);

Resolve promise.all inside a useEffect

4 Answers4