Promise.all to fetch JSON Datas is Empty

Question

In my code, I am trying to fetch data from two JSON files and return them as an array. I did the solution below but it didn't work. What should I do to log those arrays on to the console and achieve what I want?

TS:

  requests = [
    'data/products.json',
    'data/categories.json',
  ];

  constructor(private _http: HttpClient) {
    const x = Promise.all(this.requests.map((url) => fetch(url))).then(
      async (res) => Promise.all(res.map(async (data) => await data.json()))
    );
    console.log(x);
  }

I think you've overcomplicated it ... it's hard to read that code — Jaromanda X, Aug 17 '22 at 07:01
you're using `async` needlessly for a start, and where you do have an await, there really is no need — Jaromanda X, Aug 17 '22 at 07:03
Aren't you logging a Promise in this case? The result of Promise.all(...).then(...) is a Promise. — p_efros, Aug 17 '22 at 07:04
[You can’t have an async constructor](https://stackoverflow.com/q/43431550/989920), so you’ll not be able to log x like that. — evolutionxbox, Aug 17 '22 at 07:06

Juho Vepsäläinen · Answer 1 · 2022-08-17T07:08:30.353

0

The result of Promise.all is "empty" (technically a Promise) because it hasn't resolved by the time you are logging. You should await it or capture the result at .then.

I would rewrite that as const x = await Promise.all(...) outside of a constructor in a method or go with Promise.all(...).then(...).

edited Aug 17 '22 at 07:08

answered Aug 17 '22 at 07:03

Juho Vepsäläinen

26,573
12
79
105

2

x would actually be a Promise, not "empty" – Jaromanda X Aug 17 '22 at 07:04
when i add await at the beginning, I get an error of `'await' expressions are only allowed within async functions and at the top levels of modules.(1308)` – hecticplalalatypous Aug 17 '22 at 07:05
Yeah, it would be a promise. I was thinking there was something weird in his environment as he didn't specify where he is running. – Juho Vepsäläinen Aug 17 '22 at 07:05
If it's allowed, you would need `async constructor`. That's why I had the second paragraph. – Juho Vepsäläinen Aug 17 '22 at 07:06
If that's not legal, then you would have to capture the result at `.then`. – Juho Vepsäläinen Aug 17 '22 at 07:06
https://stackoverflow.com/questions/43431550/async-await-class-constructor – Juho Vepsäläinen Aug 17 '22 at 07:06
Yeah, it looks like `async constructor` isn't a thing by definition so you would have to find another way. – Juho Vepsäläinen Aug 17 '22 at 07:07

score -1 · Accepted Answer · answered Aug 17 '22 at 07:08

You're over complicating the code with all those pointless async

The issue is, that x is a Promise ... an unresolved Promise at the time you console.log it

try the following instead

requests = [
    'data/products.json',
    'data/categories.json',
];

constructor(private _http: HttpClient) {
    const makeRequest = (url) => fetch(url).then(response => response.json());
    
    Promise.all(this.requests.map(this.makeRequest))
    .then(x => console.log(x));
}

Promise.all to fetch JSON Datas is Empty

2 Answers2