Promise.all 사용법
이전의 포스팅에서 기본적인 Promise 사용법에 대해 다뤘다.
이번에는 여러개의 Promise가 있을 때 이를 처리하는 Promise.all에 대해 알아보고자 한다.
먼저 다음과 같이 Promise 객체가 3개 있다고 가정해보자.
위의 3개의 promise객체의 이행(fulfilled)값을 배열에 담아보자.
어떻게 할 것인가?
for문으로 함수를 배열에 담아 순회 할 것인가?
얼핏 보면 가능할 것 같지만 실제 콘솔에 찍힌 값을 보면 아래와 같다.
this is result [] -> 23번째 줄 consolerandom number check 4 -> 18번째 줄 console
random number check 6
random number check 2
결과를 보면 for문을 빠져나와 23번째 줄의 console을 먼저 출력한 후에 비동기 작업이 실행됨을 알 수 있다.
이는 for문이 동기적으로 먼저 실행된 후에 비동기 작업을 처리하기 때문이다!
물론 위처럼 처리할 수 있다면 좀 더 직관적으로 코드를 짤 수 있을것이다. 이를 가능케 하는 것이 Async/Await이다. 이건 Promise.All을 알고난 후에 알아보도록 하자.
어찌 되었든 위와 같은 여러개의 promise 값을 집계할 때 유용한 것이 Promise.all이다.
Promise.all MDN 예제
MDN을 보면 아주 친절하게 사용법이 나와 있다.
위의 코드에서 promise2는 promise값이 아니긴 하지만 공식 문서를 읽다 보면 아래와 같은 문구가 있다.
순회 가능한 객체에 프로미스가 아닌 값이 들어있다면 무시하지만, 이행 시 결과 배열에는 포함합니다.
이것이 무슨 말이냐? MDN의 설명을 보면 이행(fulfilled) 시 결과 배열에는 포함한다고 되어 있다.
이행을 하지 않는 경우는 다음과 같다.
만약 promise 객체들 중에 1가지라도 reject값을 반환한다면 이행을 거부(reject)하며, 거부한 첫 번째 이유를 반환한다.
좀 더 자세하게 알고 싶다면 MDN을 참고하자.
실패 우선성과 동기성/비동기성에 대해서 친절히 설명하고 있다.
이해가 잘 안된다면, promise 값들에 문제가 없을 때 promise가 아닌 값도 잘 처리하여 반환하여 준다고 생각하자.
이제 promise.all을 우리의 promise 객체에 적용해 보자. 간단하다!
이렇게 여러개의 promise 값들을 처리하는 Promise.all에 대해 알아 보았다.
글의 서두에서 얘기했던 for문을 써서 좀 더 직관적으로 코드를 짜보고 싶다면 async/await을 사용하면 된다.
함수에 async를 붙이고 promise 객체에 await을 붙이면 동기적으로 처리가 가능하다!
우리가 맨 처음 의도했던 식으로 for문을 이용해 여러 개의 promise객체 값들을 얻어 낼 수 있다.
코드스테이츠에서 처음 비동기 작업에 대한 스프린트를 진행할 때, MDN을 봐도 잘 이해가 가지 않아 애를 좀 먹었었다.
블로깅을 하면서 promise와 비동기 작업들에 대해 되짚어 보니 좀 이해가 되는 느낌이다! 앞으로도 꾸준히 블로깅을..!
