使用 Riverpod 打开页面时如何进行多个异步调用?
how to make more than one asynchronous calls when open a page using Riverpod?
当我的应用的用户打开首页时,我需要对服务器进行两次异步调用
首先,我需要获取当前用户数据。
然后根据当前用户数据,我需要获取他最喜欢的餐厅。
我有两种不同的方法从服务器获取这些数据
class MyAPI {
Future<User> getUserData() async {}
Future<List<Restaurant>> getUserData() async {}
}
那么如何使用 Riverpod 在我的主页中构造这 2 个异步方法?
- 显示循环加载指示器
- 进行这 2 个异步调用
- 隐藏循环加载指示器并加载 lisView
我知道 Riverpod 的 FutureProvider,但是 FutureProvider 只适用于一种异步服务吗?
我是否需要先以某种方式将这两个组合成一个方法,然后再使用 FutureBuilder?还是另一种更常用的方式?我不确定
如何解决这个问题。对不起,我是 Flutter 的初学者
这看起来像是 stateNotifier 的用例:
首先在你的数据模型中定义一个 UserData class :
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())));
})
当我的应用的用户打开首页时,我需要对服务器进行两次异步调用
首先,我需要获取当前用户数据。 然后根据当前用户数据,我需要获取他最喜欢的餐厅。
我有两种不同的方法从服务器获取这些数据
class MyAPI {
Future<User> getUserData() async {}
Future<List<Restaurant>> getUserData() async {}
}
那么如何使用 Riverpod 在我的主页中构造这 2 个异步方法?
- 显示循环加载指示器
- 进行这 2 个异步调用
- 隐藏循环加载指示器并加载 lisView
我知道 Riverpod 的 FutureProvider,但是 FutureProvider 只适用于一种异步服务吗?
我是否需要先以某种方式将这两个组合成一个方法,然后再使用 FutureBuilder?还是另一种更常用的方式?我不确定
如何解决这个问题。对不起,我是 Flutter 的初学者
这看起来像是 stateNotifier 的用例: 首先在你的数据模型中定义一个 UserData class :
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())));
})