Flutter) 비동기 요청을 병렬로 처리하기

우리가 Flutter를 이용해서 비동기 코드를 10개 실행한 후 페이지가 로딩되기를 원한다고 생각해봅시다.

 

뉴스 페이지를 로딩한다고 생각해봅시다

 

예를 들어 다음 사진과 같이 5개의 뉴스 데이터를 불러와야하는 상황일 때 가장 좋은 상황은 1번의 요청으로 서버에서 5개의 데이터를 한번에 몽땅 내려주는 상황일 겁니다. 하지만 Firebase를 사용한다는가, 뭔가 특수한 상황에서는 각각을 요청하기 위해 5번의 요청을 보내할지도 모릅니다. (참고로 저는 Firebase때문에 해당 상황이 발생했습니다 ㅋㅋ;)

 

각각의 요청을 총 5번 비동기로 요청하는 코드를 작성하면 다음과 같습니다.

DartPad 실행 시 오차가 있음

 

dartpad에서 실행하여 다소 오차는 있지만 대략적으로 각각 5번을 실행했을 때 5초정도가 소요되는걸 확인할 수 있습니다.

 

이제  해당 코드를 이용해서 병렬로 처리해봅시다.

코드의 원리는 생각보다 간단합니다.

 

1. for문을 통하여 await를 사용하지않고 함수를 한번에 5번을 실행 시킵니다.

2. 이때 함수가 실행될 때마다 List<Future>에 리턴값을 추가합니다.

3. 반복문이 종료되고  List<Future> 변수의 값이 모두 리턴되었기를 기다립니다.

 

놀라운 실행 결과

 

실행결과 무려 5배나 단축되는 것을 확인 할 수 있습니다.

여기서 핵심은 List<Future>를 사용하여 비동기 함수의 Future값을 리턴받는 것을 기다리는 것입니다.

 

 

저의 경우에는 해당 방식을 통하여 Firebase에서 한번에 데이터를 60번 조회하야 5초 이상 걸리던 것을 1초 정도로 단축하는데 성공하였습니다.

 

물론 해당 방법이 자주 쓰일 상황은 아닌 것 같지만 List<Future>를 이용한 개념을 숙지하고 있으면 언젠가 반드시 큰 도움이 될 것 같습니다.

 

추가적인 질문이나 오류는 댓글 남겨주시면 감사하겠습니다.

 

해당 코드의 실행은 DartPad를 통해 웹으로 실행 하실 수 있습니다. 다만 위에도 써놨듯 실행 시간에 매우 큰 오차가 발생 할 수 있으므로 2~3번 실행 해보시는 것을 추천합니다.

DartPad