[JS] 2개의 API 결과값 합치기

최종 코드는 맨 밑에 '덧2' 참고!

배경

조건에 따라 api를 각각 따로 호출하고, 결과값은 합쳐서 state에 저장해야 하는 상황이다. 간단한 문제일 줄 알았는데 .then() 안에 있는 결과값을 어떻게 밖으로 빼고 가공해야 몰라서 한참 헤맸다.

if (조건문1) {
  fetch
    .get('uri')
    .then((res1) => res1)  // type : arr
    .catch(() => {})
}

if (조건문2) {
  fetch
    .get('uri')
    .then((res2) => res2)  // type : arr
    .catch(() => {})
}

// 원하는 결과값
setResult([...res1, ...res2]) // 대충 느낌만 반영한 코드

해결 방법

1. 조건문보다 상위 스코프에 변수를 2개 생성하고, fetch에서 반환되는 값을 각각 변수에 저장해준다.
2. 해당 변수들(promise)을 넣은 리스트를 Promise.all() 함수를 통해 single promise로 만들고, 이를 .then()으로 받으면 2차원 array로 쓸 수 있게 된다.
3. [].concat.apply([], exampleArr) 함수를 사용해서 1차원 배열로 만든다!

let aPromise;
let bPromise;
   if (조건문1) {
      aPromise = fetch
                  .get('uri')
                  .then((res1) => res1)
                  .catch(() => {})
   }
   if (조건문2) {
       bPromise = fetch
                   .get('uri')
                   .then((res2) => res2)
                   .catch(() => {});
   }
// .filter() :api 반환값이 null일 경우, promise가 undefined이기 때문에 걸러주어야 한다
return [aPromise, bPromise].filter((promise) => promise); 
})
  .then((promises) => {
     Promise.all(promises)
       .then((twoDimenArr) => {
              setResult([].concat.apply([], twoDimenArr));
            });
          }
        })

더 간단한 방법이 있을 것 같지만 현재로선 이것이 최선이었습니다...🤗
어쨌든 해결!✨

+ 덧

흐름은 그대로 쓰고, 코드만 리펙토링 해보았다. 불필요한 .then()이 한 번 줄었다.

let aPromise;
let bPromise;
   if (조건문1) {
      aPromise = fetch
                  .get('uri')
                  .then((res1) => res1)
                  .catch(() => {})
   }
   if (조건문2) {
       bPromise = fetch
                   .get('uri')
                   .then((res2) => res2)
                   .catch(() => {});
   }
return Promise.all([aPromise, bPromise].filter((promise) => promise));
})
  .then((twoDepthArr) => {
       setResult([].concat.apply([], twoDepthArr));
  })

+ 덧2

데이터가 null일 때 만들어지는 promise는 위 코드처럼 filter로 걸러낼 수 없다!
Be Careful with Async Functions that Return Booleans

a Promise object is not one of the eight falsy values in JavaScript, so checking its truthiness is pointless: When coerced to a boolean, a Promise is always true.

promise는 false로 치지 않는 타입이므로, 강제로 체크할 경우 무조건 true로 확인된다는 뜻.
그러므로, 데이터가 null로 올 경우를 거르고 싶다면 two depth array로 변환된 다음에 걸러야 유효하다.

let aPromise;
let bPromise;
   if (조건문1) {
      aPromise = fetch
                  .get('uri')
                  .then((res1) => res1)
                  .catch(() => {})
   }
   if (조건문2) {
       bPromise = fetch
                   .get('uri')
                   .then((res2) => res2)
                   .catch(() => {});
   }
return Promise.all([aPromise, bPromise]);
})
  .then((twoDepthArr) => {
     // 방어 코드
     const filterArr = twoDepthArr.filter((item) => Boolean(item));
     setResult([].concat.apply([], filterArr));
  })