Flutter状态管理问题：AsyncValue.guard未触发错误弹窗排查

我正在学习Flutter状态管理，希望API抛出错误或异常时显示错误弹窗。以下是我实现的Provider状态代码，当故意让API抛出错误时，错误弹窗并未显示，页面一直停留在加载状态。只有显式将state设置为AsyncValue.error时才会触发错误，但我认为AsyncValue.guard应该自动处理错误（文档说明其可自动处理错误），请问我哪里出错了？

状态实现代码 #

// Creating state where the freezed annotation will suggest that boilerplate code needs to be generated
@Freezed()
abstract class TodoState with _$TodoState {
  const factory TodoState({@Default([]) List<TodoDTO> todos}) = _TodoState;

  const TodoState._();
}

// Creating state notifier provider
final todoStateProvider =
    StateNotifierProvider<TodoNotifier, AsyncValue<TodoState>>(
        (ref) => TodoNotifier());

// Creating Notifier
class TodoNotifier extends StateNotifier<AsyncValue<TodoState>> {
  final TodoService todoService = TodoServiceImpl();

  // Notifier constructor - call functions on provider initialization
  TodoNotifier() : super(AsyncValue.loading()) {
    loadTop40Todos();
  }

  // loadTodos top 40 todos
  void loadTop40Todos() async {
    state = AsyncValue.loading();
    final AsyncValue<List<TodoDTO>?> av =
        await AsyncValue.guard(() async => todoService.loadTopEntities());
    final List<TodoDTO> list = av.value!;
    state = AsyncValue.data(TodoState());
    state = AsyncValue.data(state.value!.copyWith(todos: list));
  }

问题根源 #

1. 完全忽略了AsyncValue.guard的错误状态
   你用AsyncValue.guard包裹API调用后，直接通过av.value!强制解包取值，完全没处理av可能是AsyncValue.error的情况。当API抛出异常时，av会是错误状态，但你没有把这个状态传递给state，反而直接覆盖成AsyncValue.data，导致错误被掩盖。

2. 错误的state更新逻辑
   获取av后，你连续两次将state设置为AsyncValue.data，不管av是否为错误状态，这直接覆盖了AsyncValue.guard返回的错误信息，页面自然不会触发错误弹窗。

修复方案 #

修改loadTop40Todos方法，正确处理AsyncValue.guard返回的结果，将其状态同步到state：

简化版（推荐） #

void loadTop40Todos() async {
  state = AsyncValue.loading();
  // 直接将guard返回的AsyncValue赋值给state，自动处理成功/错误状态
  state = await AsyncValue.guard(() async {
    final List<TodoDTO> list = await todoService.loadTopEntities();
    return TodoState(todos: list);
  });
}

分步处理版 #

如果需要对结果做额外处理，可以通过when方法判断状态：

void loadTop40Todos() async {
  state = AsyncValue.loading();
  final AsyncValue<List<TodoDTO>> av =
      await AsyncValue.guard(() => todoService.loadTopEntities());
  
  state = av.when(
    data: (list) => AsyncValue.data(TodoState(todos: list)),
    error: (error, stack) => AsyncValue.error(error, stack),
    loading: () => AsyncValue.loading(),
  );
}

关键说明 #

• AsyncValue.guard的核心作用是自动将异步操作的成功结果包装为AsyncValue.data，异常包装为AsyncValue.error，你需要将这个返回值直接赋值给state，或根据其状态更新state。
• 禁止用!强制解包value，这会在错误状态下触发空指针异常，同时完全掩盖AsyncValue的错误状态。

内容的提问来源于stack exchange，提问作者Blessy Khauhelo