Promise.all를 사용하여 네트워크 통신 개선하기

문제

웹뷰 프로젝트를 진행할 때 로그인 후에 유저에 대한 정보를 서버에서 통신하여 데이터를 받아오고 있었다. 이때 많은 로직을 async/await로 처리하여 불필요한 지연이 발생하였고, 이를 해결하기 위해서 Promise.all 도입이 필수적이었다. 

 

---

 

Promise.all 이란?

javaScript에서 비동기적으로 다수의 Promise를 동시에 처리하고 모든 Promise가 완료될 때까지 기다리는 메서드이다. 

Promise.all은 배열 Promise들을 인자로 받고, 해당 Promise의 결과를 배열로 반환한다. 
Promise all은 여러개의 비동기 작업을 병렬적으로 처리할 때 유용하게 사용된다. 즉, 모든 작업이 완료될 때까지 대기할 필요가 없고, 작업들 간의 순서가 서로 연관되지 않은 경우 유용하게 사용할 수 있다. 

 

async/await과 Promise.all

await은 Promise를 반환하는 함수 앞에 사용되며, Promise가 resolve될 때까지 코드의 실행을 일시 중지한다.
반면, Promise.all은 여러 개의 Promise를 동시에 처리하고 모든 Promise가 완료될 때까지 기다린다. 

따라서, async/await은 서로 순서가 중요한 개별적인 비동기 작업을 처리할 때 유용하고
ex) A를 수행 후 B를 수행해야함 -> await A(); await B();

Promise.all은 순서와 관계없이 병렬적으로 여러 개의 Promise를 동시에 처리하고 결과를 기다릴 때 유용하다.

그림으로 표현하면 다음과 같다. 

 

// 기존코드
await initMberReviewList(mberInfo.mberSeq);
await initMberQnaList(mberInfo.mberSeq);

// 수정코드
  await Promise.all([
        initMberReviewList(mberInfo.mberSeq),
        initMberQnaList(mberInfo.mberSeq),
]);

우선 async 함수를 통하여 비동기 작업을 수행하도록 코드를 구성했다. 함수 내부에서 await키워드를 사용하여 비동기 작업이 완료되는 것을 기다렸다.  여기서 initMberReviewList, initMberQnaList는 후기와 Qna리스트를 불러오는 비동기 작업이다. 

 

• 기존코드에서는 후기, Qna데이터를 순차적으로 불러오고있다. 
• 수정된 코드에서는 후기, Qna데이터를 병렬적으로 불러오고있다. 

 

 

기존코드의 소요시간은 130ms, 수정된 코드의 소요시간은 48ms로 나타났다. 

기획과 로직상 후기와 Qna데이터는 서로 개별적인 데이터이기 때문에 병렬적으로 비동기 데이터를 처리하는 Promise.all 메서드를 이용해 초기 로그인 후 로딩 속도가 개선되었다. 

 

---

결론

비동기 로직 처리의 최종 진화형인 async/await을 습관적으로 사용하는 경향이 있었는데, 비동기 로직이 서로 연관되어 하나의 로직을 다른 로직이 대기해야 하는 것이 필수적이라면 async/await을 사용하는 것이 좋다. 하지만 초기 api통신으로 리스트를 받아오는 등 서로 연관되지 않은 데이터를 받아올 때는 Promise.all을 사용하면 병렬적으로 비동기 로직을 받아오기 때문에 성능 개선에 도움이 된다.