在 Flutter 中执行之前等待所有异步函数完成

Question

我正在为我的应用程序使用 Flutter。我需要从 Firebase 实时数据库中查询大量信息（例如 50 个不同的数据位置），因此我需要异步启动它们并等待它们全部返回，然后再更新 UI 以向用户显示信息。

如何在 Flutter 中实现这一点？使用 async，await，我只能等待 1 个异步函数。

Answer 1

请查看Future.wait 方法。使用 Future.wait() 您可以启动多个请求，然后等待所有请求完成。我还在下面给出了示例代码。

等待方法

Future<List<T>> wait <T>(

    Iterable<Future<T>> futures,
    {bool eagerError: false,
    void cleanUp(
        T successValue
    )}

)

等待多个期货完成并收集它们的结果。

返回一个future，一旦所有提供的futures完成 已完成，无论是结果还是错误（如果有） 提供的期货失败。

返回的未来值将是一个列表 是按照通过迭代提供期货的顺序产生的 期货。

如果任何未来以错误完成，则返回的未来 完成该错误。如果进一步的期货也完成 错误，这些错误将被丢弃。

如果 eagerError 为 true，则返回的 future 以错误结束 立即从一个期货的第一个错误。否则所有 期货必须在返回的期货完成之前完成（仍然 第一个错误；其余的错误将被静默删除）。

在发生错误的情况下，cleanUp（如果提供）会在任何 成功期货的非空结果。这使得可以 清理否则会丢失的资源（因为返回 future 不提供对这些值的访问）。清理功能 如果没有错误，则未使用。

不应该抛出对 cleanUp 的调用。如果是这样，错误将是 未捕获的异步错误。

请看下面的示例代码，所有三个期货的结果同时加载到 ListView 中，因为 Future.wait 在返回结果之前等待所有期货完成：

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Future<List<String>> futureWait() async {
    return Future.wait([
      Future.delayed(const Duration(seconds: 1), () => "First Future Done"),
      Future.delayed(const Duration(seconds: 2), () => "Second Future Done"),
      Future.delayed(const Duration(seconds: 3), () => "Third Future Done"),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Demo App"),
        ),
        body: FutureBuilder<List<String>>(
          future: futureWait(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              print(snapshot.data.length);
              return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) => ListTile(
                  title: Text(snapshot.data[index]),
                ),
              );
            }
            return const Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }
}