一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

---

Riverpod的官方文档有多国语言，但是没有汉语，所以个人简单翻译了一版。

官网文档：Riverpod

GitHub：GitHub - rrousselGit/river_pod

Pub：riverpod | Dart Package (flutter-io.cn)

译时版本：riverpod 1.0.3

---

FutureProvider

FutureProvider　和 Provider 是相同的，不过它用于异步代码。

FutureProvider 通常用于：

• 处理和缓存异步操作（例如网络请求）
• 优雅得处理异步操作的错误/加载中的状态
• 将多个异步值绑定到其它值中

FutureProvider 和 ref.watch 绑定后有很多好处。 该绑定允许自动在一些变量改变时重新获取数据，确保我们总是有最新的值。

信息

FutureProvider 没有提供用户交互后直接更新计算的方式。

它设计用来解决简单的使用场景。 更多高级的场景，考虑使用 StateNotifierProvider 。

用法示例：读取配置文件

FutureProvider 是可以将通过读取 JSON 文件创建的 Configuration 对象暴露出来的便利的方式。

创建配置通常会用 async/await 语法完成，但是它在 provider 内部。 使用 Flutter 的 asset 系统，相关代码会是：

final configProvider = FutureProvider<Configuration>((ref) async {
  final content = json.decode(
    await rootBundle.loadString('assets/configurations.json'),
  ) as Map<String, Object?>;

  return Configuration.fromJson(content);
});

然后，UI 可以如下监听配置：

Widget build(BuildContext context, WidgetRef ref) {
  AsyncValue<Configuration> config = ref.watch(configProvider);

  return config.when(
    loading: () => const CircularProgressIndicator(),
    error: (err, stack) => Text('Error: $err'),
    data: (config) {
      return Text(config.host);
    },
  );
}

这会在 Future 完成时自动重新构建 UI 。同时，如果多个组件需要该配置，asset 只会被解码一次。

正如所见到的，在组件内部监听 FutureProvider 返回 AsyncValue - 它允许处理错误/加载中的状态。

---