如何在Riverpod中重置FutureProvider的状态

Question

问题描述：

1. 用户进入页面时，显示loading，然后自动执行网络请求。
2. 如果请求成功，会显示相关数据。
3. 如果请求失败，会显示自定义错误页面，其中有一个重新加载按钮
4. 理想情况下，如果用户点击Reload按钮，网络请求会重新执行，页面应该重新进入loading状态并显示loading页面
5. 问题是第一次加载失败后，用户通过点击Reload按钮手动触发网络请求，页面并没有重新进入加载状态，而是等到数据请求成功后直接显示数据，并且在请求返回之前不会进入加载状态。

代码如下

@riverpod
Future<String> getUserInfo(GetUserInfoRef ref) async {
  ResponseModel res = await TestApi.getUserInfo();
  return res.data['name'];
}

// UI Page
Widget build(BuildContext context) {
    final request = ref.watch(getUserInfoProvider);
    return Scaffold(
      appBar: AppBar(title: const Text("MyPage2")),
      body: switch (request) {
        AsyncData(:final value) => Text(value),
        AsyncError(:final error) => MyErrorWidget(
            onReload: () {
              // Reload button click callback
              ref.refresh(getUserInfoProvider);
            },
          ),
        _ => const CircularProgressIndicator(color: Colors.red),
      },
    );
  }

我尝试刷新提供程序，但没有成功。我希望有一种方法可以使提供程序状态在刷新提供程序时从加载开始。否则，我只能在 MyErrorWidget 中添加一个加载小部件来处理它。

Answer 1

我建议您查看 Riverpod 文档，了解如何实现拉动刷新。

在上面提到的示例中，刷新 FutureProvider：

onRefresh: () => ref.refresh(getUserInfoProvider.future),

已使用。