javascript - JSON 데이터를 가져오기 위한 Promise.all이 비어 있음

제 코드에서는 두 개의 JSON 파일에서 데이터를 가져와 배열로 반환하려고 하고 있습니다. 아래와 같이 해결책을 시도했지만 작동하지 않았습니다. 콘솔에 그 배열들을 출력하고 원하는 결과를 얻으려면 어떻게 해야 하나요?

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

답변 #1

Promise.all의 결과는 로그를 찍을 때 아직 해결되지 않았기 때문에 "비어 있음"(기술적으로는 Promise)입니다. await를 사용하거나 .then에서 결과를 받아야 합니다.

저는 그것을 생성자 밖의 메서드에서 const x=await Promise.all(...)로 다시 작성하거나 Promise.all(...).then(...)을 사용하는 쪽으로 하겠습니다.

답변 #2

너는 그런 쓸모없는 async로 코드를 너무 복잡하게 만들고 있어

문제는 x가 약속(Promise)이라는 것입니다 ... console.log를 찍는 시점에는 아직 해결되지 않은 약속입니다

대신 다음을 시도해 보세요

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