从fetchData方法中删除async修饰符

Question

我试图从我的存储库中获取数据，但是当我尝试调用api时出现错误，这是我的商店：

class Locations = _Locations with _$Locations;

abstract class _Locations implements Store {

  ApiClient _apiClient;

  _Locations(ApiClient apiClient){
    _apiClient = apiClient;
  }

  @observable
  List<Location>locations = [];

  @action
  Future<List<Location>> fetchLocations() async{
    locations =  await apiClient.getLocations();
  }

}

错误输出是..

[SEVERE] mobx_codegen|mobx_generator on lib/ui/location/state/locations.dart:
Could not make class "Locations" observable. Changes needed:
  1. Remove async modifier from the method "fetchLocations"

知道我做错了吗？

Answer 1

MobX.dart现在支持异步操作。只要确保返回Future。它将自动包裹动作中的所有突变！

@observable
ObservableList<Location> locations = [];

@action
Future<void> fetchLocations() async {
  final locations = await _apiClient.getLocations();
  locations.addAll(newLocations); // this will be wrapped inside an action
}

Answer 2

使用runInAction来改变状态和正常的异步函数来获取数据

void fetchLocations async() {
  locationsList =  await apiClient.getLocations();
  runInAction(() => locations = locationsList); 
}

Answer 3

您还可以从操作代码中拆分异步代码（仅修改observable）：

  @observable
  ObservableList<Location> locations = [];

  void fetchLocations() async {
    final locations = await _apiClient.getLocations();
    addLocations(locations);
  }

  @action
  void addLocations(List<Location> newLocations) {
    locations.addAll(newLocations);
  }

即使您没有从UI调用操作，上述操作也会起作用。