😇

Future.waitとは?

2024/07/06に公開

Flutter

Dart

tech

📕Overview

複数のフューチャーの完了を待ち、その結果を収集する。

提供されたすべてのフューチャが完了したら、その結果とともに、あるいは提供されたフューチャのどれかが失敗したらエラーとともに、完了したフューチャを返します。

返されるフューチャーの値は、フューチャーの反復によって提供された順に生成されたすべての値のリストになります。

いずれかのフューチャーがエラーで終了した場合、返されるフューチャーはそのエラーで終了します。さらにフューチャーがエラーで終了した場合、それらのエラーは破棄されます。

eagerErrorがtrueの場合、返されるフューチャーは、いずれかのフューチャーが最初にエラーを出したときに、直ちにエラーで完了します。そうでない場合は、返される未来が完了する前に、すべての未来が完了しなければなりません（やはり最初のエラーで完了します。）

エラーの場合、cleanUp（もし提供されていれば）は、成功したフューチャーの非NULL結果に対して呼び出される。これにより、（返されたフューチャーがこれらの値へのアクセスを提供しないため）さもなければ失われてしまうリソースをクリーンアップすることが可能になります。cleanUp関数は、エラーがなければ使用されません。

cleanUpの呼び出しは投げてはいけません。エラーが発生した場合、そのエラーはキャッチされない非同期エラーになります。

Example:

void main() async {
  var value = await Future.wait([delayedNumber(), delayedString()]);
  print(value); // [2, result]
}

Future<int> delayedNumber() async {
  await Future.delayed(const Duration(seconds: 2));
  return 2;
}

Future<String> delayedString() async {
  await Future.delayed(const Duration(seconds: 2));
  return 'result';
}

複数格納して実行できる

Future<int> delayedNumber() async {
  await Future.delayed(const Duration(seconds: 2));
  return 2;
}

Future<String> delayedString() async {
  await Future.delayed(const Duration(seconds: 2));
  return 'result';
}

Future<String> delayedEmojis() async {
  await Future.delayed(const Duration(seconds: 2));
  return '👍🏼';
}

void main() async {
  var value = await Future.wait([delayedNumber(), delayedString(), delayedEmojis()]);
  print(value); // [2, result, 👍🏼]
}

🧷summary

Flutterを使ってアプリで表示するのもやってみたが、なかなかうまくいかないですね💦
公式の動画見たいなコードを書けない？？？

import 'dart:async';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FutureEmojisExample(),
    );
  }
}

class FutureEmojisExample extends StatefulWidget {
  const FutureEmojisExample({super.key});

  @override
  _FutureEmojisExampleState createState() => _FutureEmojisExampleState();
}

class _FutureEmojisExampleState extends State<FutureEmojisExample> {
  
  Future<String> delayedT() async {
  await Future.delayed(const Duration(seconds: 2));
  return '😇';
}

Future<String> delayedG() async {
  await Future.delayed(const Duration(seconds: 3));
  return '😱';
}

Future<String> delayedB() async {
  await Future.delayed(const Duration(seconds: 4));
  return '😭';
}

Future<String> delayedApple() async {
  await Future.delayed(const Duration(seconds: 5));
  return '🍎';
}

Future<String> delayedBanana() async {
  await Future.delayed(const Duration(seconds: 6));
  return '🍌';
}

Future<String> emojiFuture() async {
  // Future.wait
  final List<String> emojis = await Future.wait([
    delayedT(),
    delayedG(),
    delayedB(),
    delayedApple(),
    delayedBanana(),
  ]);
  return emojis.join();
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Future Emojis Example'),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: emojiFuture(),
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text(
                '${snapshot.data}',
                style: const TextStyle(fontSize: 50),
              );
            }
          },
        ),
      ),
    );
  }
}

[実行結果]

🧑‍🎓thoughts

動画によると....

複数の未来のコードを書いていることにお気づきですか？

非同期処理を呼び出しループし、結果を待ちそれらの結果をリストに追加します。
次回は、Future.waitを試してみてください。Future.waitを使用すると、Future
のリストを待機し、提供されたFutureがすべて完了すると完了するFutureを返します。
返されるデータは、先物が提供されたのと同じ順序の結果のリスト、または提供された
先物のいずれかが失敗した場合は、エラーを含む結果のリストになります。
先物を一度にリストにつかすることも、一度だけ１つだけ追加することもできます。
しかし、いずれにせよ、すべての先物が同時にキックオフすることになる。
これでコードが少しすっきりし、合計待機時間は、すべての将来の合計ではなく、
最も遅い将来のみになります。それでは、未来のあなたに感謝します。
Future.waitおよびその他すべてのFlutterテクニックの詳細については、
flutter.devを参照してください。

Future.waitを使用すると、Future
のリストを待機し、提供されたFutureがすべて完了すると完了するFutureを返します。

１個つづ表示してくれるわけでは、なくて全てのFutureの処理が完了したら、Futureを返すようです。なので、全てのFutureが表示されたわけですね。勘違いしてた😅

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion