문제가 발생한 배경

문자열 배열 안에 있는 url들을 api 통신을 통해 얻은 결과 값으로 변환하려고 map함수를 사용할 때 Promise의 결과가 pending 상태로 나오는 상황이다.

---

문제의 원인 알아보기

map 함수안에 콜백 함수에는 async/await을 통해 비동기적으로 동작할 수 있게 설정 해주었지만 map 함수는 동기적으로 실행하기 때문에 async함수 내부의 await문이 실행되기 전에 map함수가 완료되기 때문에 pending 상태에 콘솔에 출력되었다.

---

문제 해결 방법

• Promise.all() 사용하기

💡 Promise.all() 이란
순회 가능한 객체에 주어진 모든 프로미스가 이행한 후 혹은 프로미스가 주어지지 않았을 때 이행하는 즉시 성공하는 프로미스(resolve)를 반환한다. 만약 주어진 프로미스 중 하나라도 실패한 경우 모든 프로미스가 실패했다고 판단한다.

  const posts = await Promise.all(
    data?.post.map(async (url) => {
      const response = await fetch(
        `${protocol}://${hostname}/api/proxy?url=${url}`,
      );
      const data = await response.json();
      return data;
    }),
  );

하지만 이런 방식으로 사용하면 data가 undefined 일 경우 옵셔널 체이닝(?.)에 의해 null을 반환하기 때문에 순회할 수 없어 ts 에러가 발생한다.

• ts 에러 메세지

이 호출과 일치하는 오버로드가 없습니다.

오버로드 1/2('(values: readonly unknown[] | []): Promise<[] | unknown[]>')에서 다음 오류가 발생했습니다.
'Promise<any>[] | undefined' 형식의 인수는 'readonly unknown[] | []' 형식의 매개 변수에 할당될 수 없습니다.
'undefined' 형식은 'readonly unknown[] | []' 형식에 할당할 수 없습니다.

오버로드 2/2('(values: Iterable<any>): Promise<any[]>')에서 다음 오류가 발생했습니다.
'Promise<any>[] | undefined' 형식의 인수는 'Iterable<any>' 형식의 매개 변수에 할당될 수 없습니다.
'undefined' 형식은 'Iterable<any>' 형식에 할당할 수 없습니다.

1. if문 사용하여 해결하기

if (!data) {
  return;
}

const posts = await Promise.all(
  data.post.map(async (url) => {
    const response = await fetch(`${protocol}://${hostname}/api/proxy?url=${url}`);
    const data = await response.json();
    return data;
  }),
);

2. Nullish Coalescing 연산자(??) 사용하여 해결하기

const posts = await Promise.all(
  (data?.post ?? []).map(async (url) => {
    const response = await fetch(`${protocol}://${hostname}/api/proxy?url=${url}`);
    const data = await response.json();
    return data;
  }),
);

위와 같은 방법들을 활용해서 data 있다는 것을 보장하거나 없을 경우를 대처하면 해결할 수 있다.

---

🙃 도움이 되었던 자료들

Array.prototype.map() - MDN 문서
Promise.all() - MDN 문서