[ISSUE] API 중첩 호출

백엔드에서 제공하는 API를 중첩해서 호출해야 하는 경우가 생겼습니다.

 

## 상황

카트라이더 api

모든 매치 리스트를 조회하면 매치 id의 리스트가 나오게 된다.

전달받은 매치 id들을 통해 각 매치의 상세정보를 받아오고 싶었다.

 

그래서 두 번의 API 콜이 중첩해서 사용하려고 했다.

 

기존에 사용하는 메서드를 중첩하는 것처럼 사용하니

다음과 같이 무수하게 많은 promise 배열을 return 받았다.

 const getTotalMatchData = async () => {
    setLoadingState(1);
    return await getAllMatch().then((response) => {
      return (response as ParentMatchesType).matches[0].matches.slice(0, 60).map((matchCode) => {
        return matchCode;
      });
    });
  };

  const getDetailData = (matchCodeList: string[]) => {
    const res = matchCodeList.map(async (matchCode) => {
      setCount(count + 1);
      return await getMatchDetailData(matchCode);
    });

    return res;
  };

이유를 생각해보니

두 번째 api콜 처리하는 코드 자체가 결과 값을 반환하기 전에 return 하기 때문에 저렇게 많은 promise 배열이 return 된 것이 아닐까 하는 생각이 들었다.

 

 

## 해결

메서드가 끝나고 나서 값을 반환해주는 방법이 필요하다고 판단했고,

검색해보니 Promise.all을 사용하면 내부 주어진 모든 프로미스가 수행되고 나서 결과 값을 return 할  수 있다.

 

기존 코드에서

다음과 같이 getDetailData 코드를 바꾸어 주었다.

 

const getDetailData = async (matchCodeList: string[]) => {
    const res = matchCodeList.map(async (matchCode) => {
      setCount(count + 1);
      return await getMatchDetailData(matchCode);
    });
    const taskPromises = await Promise.all(res);
    return taskPromises as MatchDetailType[];
  };

그 결과를 리턴했을 때 내가 원하는 결과 리스트를 얻을 수 있었다.

 

## Reference

언제 Promise.all을 사용해야 될까?

Promise.all() - JavaScript | MDN