Riverpod中如何使用StateNotifier管理加载与错误状态

核心思路是用Riverpod内置的AsyncValue<T>作为StateNotifier的状态类型——这个类型本来就是FutureProvider、StreamProvider内部用来管理异步状态的标准结构，天然覆盖加载中、请求成功、请求错误三种状态，不需要你自己零散定义isLoading、error、data变量，也不会出现多变量状态不同步的问题。

具体实现步骤 #

• 第一步：编写StateNotifier，初始化时默认设置为加载状态，异步请求过程中更新对应状态

// 以获取用户信息为例，User替换为你自己的业务模型
class UserNotifier extends StateNotifier<AsyncValue<User>> {
  UserNotifier() : super(const AsyncValue.loading()) {
    // 初始化时自动触发数据加载，不需要在UI层生命周期方法里手动调用
    fetchUser();
  }

  Future<void> fetchUser() async {
    // 每次触发刷新先切到加载态，和FutureProvider的刷新行为一致
    state = const AsyncValue.loading();
    try {
      // 替换为实际的异步请求/IO逻辑
      final userData = await dio.get('/api/user/info');
      // 请求成功，存入返回数据
      state = AsyncValue.data(User.fromJson(userData.data));
    } catch (err, stackTrace) {
      // 请求失败，存入错误信息和堆栈
      state = AsyncValue.error(err, stackTrace);
    }
  }
}

• 第二步：注册StateNotifierProvider

final userInfoProvider = StateNotifierProvider<UserNotifier, AsyncValue<User>>((ref) {
  return UserNotifier();
});

• 第三步：UI层消费状态，写法和FutureProvider完全一致
  不需要自己写三元表达式判断加载/错误/成功状态，直接调用AsyncValue自带的when方法就能分状态渲染：

Consumer(
  builder: (context, ref, _) {
    final userState = ref.watch(userInfoProvider);
    return userState.when(
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (err, _) => Center(child: Text('加载失败：${err.toString()}')),
      data: (user) => Center(child: Text('欢迎你，${user.nickname}')),
    );
  },
)

和传统Provider写法的对比 #

你之前用普通Provider配合setState、isLoading变量、didChangeDependencies的写法，在这套方案里全部可以简化：

• 不需要手动维护多个状态变量，所有异步状态都收敛在AsyncValue里，不会出现“加载结束但数据为空也没报错”的异常状态
• 不需要在UI的生命周期方法里手动触发初始加载，Notifier初始化时会自动执行加载逻辑
• 刷新逻辑直接调用notifier实例的fetchUser方法即可，不需要额外操作setState

// 触发刷新的示例
ElevatedButton(
  onPressed: () => ref.read(userInfoProvider.notifier).fetchUser(),
  child: const Text('重新加载'),
)

如果你有自定义状态结构的需求，也可以自己实现密封类做状态封装，但日常业务场景用内置的AsyncValue足够，和Riverpod其他组件的行为也完全对齐，没有额外的适配成本。

内容的提问来源于stack exchange，提问作者Anmol Singh