使用 Riverpod 打开页面时如何进行多个异步调用？答案

【问题标题】：how to make more than one asynchronous calls when open a page using Riverpod?使用 Riverpod 打开页面时如何进行多个异步调用？
【发布时间】：2021-05-17 09:13:08
【问题描述】：

当我的应用程序的用户打开主页时，我需要对服务器进行两次异步调用

首先，我需要获取当前用户数据。然后根据当前的用户数据，我需要获取他最喜欢的餐馆。

我有两种不同的方法从服务器获取这些数据

class MyAPI {

   Future<User> getUserData() async {}

   Future<List<Restaurant>> getUserData() async {}

}

那么如何使用 Riverpod 在我的主页中构造这 2 个异步方法？

显示循环加载指示器
进行这 2 个异步调用
隐藏循环加载指示器并加载 lisView

我从 Riverpod 知道 FutureProvider，但 FutureProvider 只适用于一种异步服务，对吧？

我是否需要先以某种方式将这两者组合成一个方法，然后再使用 FutureBuilder？还是另一种更常用的方式？我不确定

如何解决这个问题。对不起，我是 Flutter 的初学者

【问题讨论】：

标签： flutter riverpod

【解决方案1】：

这看起来像一个 stateNotifier 的用例：首先在您的数据模型中定义一个 UserData 类：

class UserData{
  final User user;
  final List<Restaurant> restaurants;
  UserData(this.user, this.restaurants)
}

接下来定义一个状态及其关联的 stateNotifierProvider ：

final userDataProvider = StateNotifierProvider<UserDataNotifier, AsyncValue<UserData>>((ref) => UserDataNotifier());
class UserDataNotifier extends StateNotifier<AsyncValue<UserData>> {
  UserDataNotifier() : super(AsyncValue.loading()){
    init();
  }
  final _api = MyAPI();
  void init() async {
    state = AsyncValue.loading();
    try {
      final user = await _api.getUser;
      final List<Restaurant> restaurants = await _api.getFavoriteRestaurant(user);
      state = AsyncValue.data(UserData(user,restaurants));
    } catch (e) {
      state = AsyncValue.error(e);
    }
  }
}

最终在你的 UI 中使用消费者：

Consumer(builder: (context, watch, child) {
  return watch(userDataProvider).when(
      loading: ()=> CircularProgressIndicator(),
      error: (error,_) =>
            Center(child: Text(error.toString())),
      data: (data) => Center(child: Text(data.toString())));
})

【讨论】：