Flutter BLoC事件竞争条件

3
假设我们有一个应用程序,用户有一个日历,可以选择日期来获取事件列表。当用户选择日期时,我们添加事件 CalendarSelectedDateChanged(DateTime)。Bloc组件每次接收到此类事件时从API获取数据。我们可以想象一种情况,响应的延迟不同。这将产生以下情况:
  • 用户点击日期1
  • 使用参数date=1进行API调用
  • 状态设置为加载中
  • 用户点击日期2
  • 状态设置为加载中
  • 收到请求date=2的响应
  • 状态设置为dataLoadSuccess(date=2)

期望的结果是在此处丢弃请求date=1的响应

  • 收到请求date=1的响应
  • 状态设置为dataLoadSuccess(date=1)

我们如何以最优雅的方式解决这种竞争条件(最好是一次为所有应用程序中的BLoC)?

这里是一个演示这种问题的样例代码:

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {

  ExampleBloc()
      : super(ExampleDataLoadInProgress(DateTime.now())) {
    on<ExampleSelectedDateChanged>((event, emit) async {
      await _fetchData(event.date, emit);
    });
  }

  Future<void> _fetchData(DateTime selectedDate,
      Emitter<ExampleState> emit,) async {
    emit(ExampleDataLoadInProgress(selectedDateTime));
    try {
      final data = callAPI(selectedDateTime);
      emit(ExampleDataLoadSuccess(data, selectedDate));
    } on ApiException catch (e) {
      emit(ExampleDataLoadFailure(e, selectedDateTime));
    }
  }
}
1个回答

5

默认情况下,所有事件都是并发处理的,您可以通过设置自定义转换器来更改该行为:

您可以在此处阅读有关转换器的更多信息:https://pub.dev/packages/bloc_concurrency

class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {

  ExampleBloc()
      : super(ExampleDataLoadInProgress(DateTime.now())) {
    on<ExampleSelectedDateChanged>((event, emit) async {
      await _fetchData(event.date, emit);
    },
      transformer: restartable(), // ADD THIS LINE 
    );
  }

  Future<void> _fetchData(DateTime selectedDate,
      Emitter<ExampleState> emit,) async {
    emit(ExampleDataLoadInProgress(selectedDateTime));
    try {
      final data = callAPI(selectedDateTime);
      emit(ExampleDataLoadSuccess(data, selectedDate));
    } on ApiException catch (e) {
      emit(ExampleDataLoadFailure(e, selectedDateTime));
    }
  }
}

在这个版本之前,事件是否按顺序处理? - CoderUni
2
如果你指的是mapEventToState,那么是的。这里有一个关于如何让mapEventToState并行运行的问题:https://stackoverflow.com/questions/66700401/flutter-how-to-process-bloc-events-in-parallel 简而言之,在mapEventToState中你不能使用await,但可以调用另一个异步方法。 - RMK

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接