[Flutter] AsyncValue?

reference : https://pub.dev/documentation/riverpod/latest/riverpod/AsyncValue-class.html

 

AsyncValue는 비동기 데이터를 안전하게 조작하기 위한 Utility입니다. 비동기 작업의 로드/오류 상태를 처리하는 것을 잊을 수 없다는 것이 보장됩니다. 관련하여 AsyncNotifierProvider의 반환 값으로 사용되기 때문에, AsyncNotifierProvider의 특징과 연결되는 이유입니다.

 

🥕 AsyncValue

AsyncValue는 다른 객체로 훌륭하게 변환하는 Utility를 제공합니다. 예를 들면 Flutter Widget은 when method를 사용하여 AsyncValue를 진행률 표시기, 오류화면 그리고 데이터를 표시하는데 사용할 수 있습니다. 다음은 그 예시입니다.

user.when(
	loading: () => CircularProgressIndicator(),
	error: (error, stack) => Text(error.toString()),
	data: (user) => Text("hello, ${user.name}"),
);

이렇게 다양한 행위를 할 수 있는 이유는 AsyncValue가 AsyncSnapshot의 대안으로 제기되었기 때문입니다. AsyncValue를 자세히 들여다보면 다음처럼 추상화 되어있습니다.

abstract class AsyncValue<T> {
  const factory AsyncValue.data(T value) = AsyncData<T>;
  const factory AsyncValue.loading() = AsyncLoading<T>;
  const factory AsyncValue.error(Object error, {StackTrace? stackTrace}) =
      AsyncError<T>;
}

주의해야 할 점은 AsyncSnapshot은 객체였지만, AsyncValue는 그저 값임에 유의해야 합니다.

 

🍒 loading method

앞선 칼럼에서 AsyncNotifier Class를 구현할 때, api통신을 하기 전 AsyncValue.loading()를 state에 할당하는 모습이 있습니다.

AsyncValue.loading()에 대한 설명이 구체적이지 않아 유추하자면, state에 반환할 AsyncValue를 loading상태로 할당하고 이후 api통신이 이뤄졌을 때 AsyncValue에 data, error값을 반환하는 것으로 생각했습니다.

우리가 UI에서 확인할 때, AsyncValue가 loading상태 즉, 초기화만 된 상태라면 CircularProgressIndicator()를 호출합니다. 이때 CircularProgressIndicator는 Material에서 제공하는 진행률 표시기입니다.

※ CircularProgressIndicator`s document: https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html

 

🍒 guard method

우리는 async/await를 사용할 때 try/catch를 통해 통신 실패에 대한 예외 처리를 진행했습니다. 바로 이 작업을 간소화 시켜주는 방법이 AsyncValue의 guard method입니다.

기존의 try/catch와 guard()의 차이점을 코드로 확인하면 다음과 같습니다.

// using try/catch
try {
  final response = await dio.get('my_api/data');
  final data = MyData.fromJson(response);
  state = AsyncValue.data(data);
} catch (err, stack) {
  state = AsyncValue.error(err, stack);
}
// using guard
state = await AsyncValue.guard(() async {
  final response = await dio.get('my_api/data');
  return Data.fromJson(response);
});

 

🥕 AsyncData

AsyncData는 api통신의 결과 값을 지니고 있습니다.

 

🥕 AsyncError

AsyncError는 api통신 중 발생한 에러에 대한 내용을 담고 있습니다.