[Flutter] Future.wait를 사용해서 api call 병렬 처리 하기

스크린 중에 처음에 데이터를 미리 캐싱하기 위해 데이터를 많이 불러오는 스크린이 있다.
미리 앞뒤 데이터를 불러오기 때문에 한번 데이터를 불러오고 나면 그 다음에는 앞뒤로 이동했을 때 빠르게 로딩되는데, 처음 스크린을 로딩할 때는 무려 6개의 api call이 들어가기 때문에 상대적으로 속도가 더 느려졌다.

Future.wait로 병렬 처리하기

initState를 할 때 데이터를 불러오고 있는데, 이전에는 다음과 같이 되어있었다.

Future<void> loadData() async {
	await ref.read(_provider1.notifier).fetchData();
    await ref.read(_provider2.notifier).fetchData();
    await ref.read(_provider3.notifier).fetchData();
    await ref.read(_provider4.notifier).fetchData();
    await ref.read(_provider5.notifier).fetchData();
    await ref.read(_provider6.notifier).fetchData();
}

이 경우에는 await 때문에 한줄이 끝나야 다음줄로 넘어갈 수 있다.
이렇게 데이터를 불러왔을 때는 약 1.6초 정도 시간이 걸렸다.

그런데 Future.wait를 사용하면, 0.8초 정도 시간이 걸린다.

Future<void> loadData() async {
	await Future.wait([
    	ref.read(_provider1.notifier).fetchData(),
    	ref.read(_provider2.notifier).fetchData(),
        ref.read(_provider3.notifier).fetchData(),
        ref.read(_provider4.notifier).fetchData(),
        ref.read(_provider5.notifier).fetchData(),
        ref.read(_provider6.notifier).fetchData(),
    ]);
}

Future.wait을 사용하면 이 안에 배열로 들어간 모든 api call이 동시에 실행된다.
단, Future.wait앞에 await 키워드가 붙어있기 때문에 이 다음에 다른 로직이 실행되어야 하는 경우에는 유의해서 사용해야 할 것 같다.
하지만 이 경우에는 api call만 하면 되는 상황이었고, 각각의 notifier는 필요한 부분에서 별도로 watch하고 있기 때문에 이 상황에서는 Future.wait를 통해 병렬처리하는게 훨씬 나은 것 같다.

아직 최적화라고 하면 어려운 느낌인데, 불필요한/중복되는 api call을 없애고, 필요한 경우 병렬화를 통해 데이터 로딩 속도를 조절하기만 해도 훨씬 사용성이 좋아지는 것 같다.