• Flutter中同步与异步

    一，同步/异步的理解

    1，await：同步机制

    同步操作会阻止其他操作执行，直到完成为止。同步就好比打电话一样，打电话时都是一个人在说另一个人听，一个人在说的时候另一个人等待，等另一个人说完后再接着说。

    2，async：异步机制

    异步操作一旦启动，就允许其他操作在其完成之前执行。异步就好比发邮件一样，收件人和发件人都不需要相互等待，发件人写完邮件的时候简单的点个发送就可以了，收件人收到后就可以阅读啦，收件人和发件人不需要相互依赖、不需要相互等待。

    二，Dart中同步/异步。

    async 和 await 关键字构成了异步编程的基础，它们极大地简化了异步操作的处理流程。async 关键字用于声明一个函数为异步函数，这意味着该函数的执行可能不会立即完成，并且会返回一个 Future 对象。

    1，Future 是 Dart 中的一个核心类，代表一个可能在未来某个时间点返回结果的计算。

    当在 async 函数内部遇到 await 关键字时，执行流程会暂停，直到 await 后面的异步操作完成。

    这种暂停并不会阻塞整个线程，而是允许 Dart 的事件循环继续处理其他事件，如用户交互或动画，从而保持应用的响应性。

    2，使用 await 的优势在于它能够让异步代码的逻辑流程更加直观和清晰。

    开发者不再需要通过嵌套回调（俗称“回调地狱”）来处理异步操作的结果，而是可以以近似同步的方式编写代码，使得逻辑更容易理解和维护。

    3，async 和 await 在错误处理方面也提供了便利。

    在 async 函数中，可以使用传统的 try-catch 结构来捕获异步操作中抛出的异常，这比处理 Future 的 catchError 方法更加直观。

    三，Flutter中同步/异步的使用

    1，StreamBuilder/FutureBuilder

    在 Flutter 中，StreamBuilder 和 FutureBuilder 都是用于处理异步数据源的常用组件。它们允许你在等待异步操作完成时更新 UI。尽管它们的功能类似，但它们适用于不同的异步数据源类型。

    1.1，FutureBuilder

    FutureBuilder 用于处理 Future 类型的异步数据源。Future 表示一个将来可能会完成的单一异步操作，例如一次性网络请求。

    基本用法

    • 适用场景: 当你有一个一次性的异步操作，例如从网络加载数据，执行数据库查询等。

    • 构造函数参数:

      • future: 一个 Future 对象，表示要等待的异步操作。

      • builder: 一个函数，构建UI，并根据 Future 的状态来更新UI。

        1. import 'package:flutter/material.dart';
        2.  
        3. class MyFutureBuilder extends StatelessWidget {
        4.   Future<String> fetchData() async {
        5.     await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟
        6.     return 'Hello, FutureBuilder!';
        7.   }
        8.  
        9.   @override
        10.   Widget build(BuildContext context) {
        11.     return Scaffold(
        12.       appBar: AppBar(title: Text('FutureBuilder Example')),
        13.       body: Center(
        14.         child: FutureBuilder<String>(
        15.           future: fetchData(),
        16.           builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        17.             if (snapshot.connectionState == ConnectionState.waiting) {
        18.               return CircularProgressIndicator();
        19.             } else if (snapshot.hasError) {
        20.               return Text('Error: ${snapshot.error}');
        21.             } else {
        22.               return Text('Result: ${snapshot.data}');
        23.             }
        24.           },
        25.         ),
        26.       ),
        27.     );
        28.   }
        29. }
        30.  
        31. void main() => runApp(MaterialApp(home: MyFutureBuilder()));

    1.2，StreamBuilder

    StreamBuilder 用于处理 Stream 类型的异步数据源。Stream 表示一系列的异步事件或数据，例如连续的传感器数据、WebSocket 数据等。

    基本用法

    • 适用场景: 当你有多个异步数据或事件的流，例如实时更新的数据、传感器数据等。
    • 构造函数参数:

      • stream: 一个 Stream 对象，表示要监听的异步数据流。

      • builder: 一个函数，构建UI，并根据 Stream 的状态和数据来更新UI。

      1. import 'dart:async';
      2. import 'package:flutter/material.dart';
      3.  
      4. class MyStreamBuilder extends StatelessWidget {
      5.   Stream<int> counterStream() async* {
      6.     for (int i = 0; i < 10; i++) {
      7.       await Future.delayed(Duration(seconds: 1));
      8.       yield i;
      9.     }
      10.   }
      11.  
      12.   @override
      13.   Widget build(BuildContext context) {
      14.     return Scaffold(
      15.       appBar: AppBar(title: Text('StreamBuilder Example')),
      16.       body: Center(
      17.         child: StreamBuilder<int>(
      18.           stream: counterStream(),
      19.           builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
      20.             if (snapshot.connectionState == ConnectionState.waiting) {
      21.               return CircularProgressIndicator();
      22.             } else if (snapshot.hasError) {
      23.               return Text('Error: ${snapshot.error}');
      24.             } else if (!snapshot.hasData) {
      25.               return Text('No data');
      26.             } else {
      27.               return Text('Counter: ${snapshot.data}');
      28.             }
      29.           },
      30.         ),
      31.       ),
      32.     );
      33.   }
      34. }
      35. void main() => runApp(MaterialApp(home: MyStreamBuilder()));

    1.3，FutureBuilder与StreamBuilder的优缺点

    FutureBuilder

    优点

    1. 简单易用: 适合处理一次性异步操作，只需关心数据何时完成，代码逻辑简单明了。
    2. 轻量: 只处理一次异步数据，因此不需要持续监听或管理数据流，内存和资源消耗较少。
    3. 减少复杂性: 不需要考虑多次数据更新的处理逻辑，适用于单次数据请求或简单任务。

    缺点

    1. 数据不可更新: FutureBuilder 只会在 Future 完成时更新一次，无法处理后续的数据变化。如果需要实时更新数据，需要重新触发整个组件的构建。
    2. 无法处理长时间操作: 对于需要长时间处理或持续更新的操作不适用，必须使用StreamBuilder 或其它机制。
    StreamBuilder

    优点

    1. 实时更新: 可以处理多次数据更新，每当有新的数据事件时，都会自动更新UI，适合需要实时响应数据变化的场景。
    2. 强大的灵活性: 适用于多种异步数据流处理场景，如WebSocket连接、传感器数据、用户输入等，具备更高的适应性。
    3. 多事件处理: 可以监听和响应连续的多个异步事件，提供更丰富的交互体验。

    缺点

    1. 复杂性较高: 由于需要处理多个事件，代码逻辑相对复杂，尤其是在处理错误、空数据或状态变化时，可能需要更多的管理代码。
    2. 资源消耗大: 持续监听数据流可能会占用更多的内存和CPU资源，尤其是长时间运行的操作。如果处理不当，可能会导致性能问题或资源泄漏。
    3. 潜在的状态管理问题: 如果不注意数据流的管理和清理，可能会引入内存泄漏或不必要的状态更新。
    适用场景
    • FutureBuilder: 适用于一次性数据加载场景，如启动时加载配置、单次API请求等。
    • StreamBuilder: 适用于需要持续监听和更新UI的场景，如实时聊天、状态监控、数据推送等。

    选择 FutureBuilder 还是 StreamBuilder 取决于你的需求。如果是一次性任务且不需要后续更新，FutureBuilder 是更简单的选择。如果需要处理多次数据更新或实时响应，StreamBuilder 则提供了更大的灵活性和功能。

    2，Future.wait/Future.any

    2.1，Future.wait

    Future.wait 等待所有提供的 Future 对象完成，并在所有 Future 都完成后返回一个包含每个 Future 结果的列表。如果任何一个 Future 抛出异常，则 Future.wait 会返回第一个抛出的异常。

    用法

    • 适用场景: 当你有多个并发的异步任务，并且需要等待所有任务都完成后再继续执行后续操作。

    1. import 'dart:async';
    2.  
    3. void main() async {
    4.   print('Start');
    5.  
    6.   Future<int> task1 = Future.delayed(Duration(seconds: 2), () => 1);
    7.   Future<int> task2 = Future.delayed(Duration(seconds: 3), () => 2);
    8.   Future<int> task3 = Future.delayed(Duration(seconds: 1), () => 3);
    9.  
    10.   List<int> results = await Future.wait([task1, task2, task3]);
    11.   print('Results: $results'); // [1, 2, 3]
    12.  
    13.   print('End');
    14. }

    2.2，Future.any

    Future.any 等待提供的 Future 对象中第一个完成的任务，并返回该任务的结果。如果所有 Future 都抛出异常，则 Future.any 会返回最后一个抛出的异常。

    用法

    • 适用场景: 当你有多个并发的异步任务，并且只需要其中任何一个任务完成后就继续执行后续操作。

    1. import 'dart:async';
    2.  
    3. void main() async {
    4.   print('Start');
    5.  
    6.   Future<int> task1 = Future.delayed(Duration(seconds: 2), () => 1);
    7.   Future<int> task2 = Future.delayed(Duration(seconds: 3), () => 2);
    8.   Future<int> task3 = Future.delayed(Duration(seconds: 1), () => 3);
    9.  
    10.   int result = await Future.any([task1, task2, task3]);
    11.   print('First completed result: $result'); // 3
    12.  
    13.   print('End');
    14. }

    在这个示例中，Future.any 会在 task3 完成后立即返回结果，因为 task3 是最先完成的任务。

    2.3，区别总结

    • 行为方式:

      • Future.wait 等待所有 Future 对象完成，并返回所有结果。

      • Future.any 等待第一个完成的 Future 对象，并返回其结果。

    • 错误处理:

      • Future.wait 如果任何一个 Future 抛出异常，则返回第一个抛出的异常。

      • Future.any 如果所有 Future 都抛出异常，则返回最后一个抛出的异常。

    • 适用场景:

      • Future.wait 适用于需要所有并发任务都完成后再处理结果的场景。

      • Future.any 适用于只需要其中任何一个任务完成即可继续执行的场景。

    2.4，实践中的应用场景

    使用 Future.wait

    假设你在开发一个应用，需要同时发起多个网络请求，只有在所有请求完成后才能继续处理响应数据。这时你可以使用 Future.wait：

    1. import 'dart:async';
    2.  
    3. void main() async {
    4.   Future<String> fetchUserData() async {
    5.     await Future.delayed(Duration(seconds: 2));
    6.     return 'User data';
    7.   }
    8.  
    9.   Future<String> fetchOrders() async {
    10.     await Future.delayed(Duration(seconds: 3));
    11.     return 'Orders';
    12.   }
    13.  
    14.   Future<String> fetchSettings() async {
    15.     await Future.delayed(Duration(seconds: 1));
    16.     return 'Settings';
    17.   }
    18.  
    19.   print('Fetching data...');
    20.  
    21.   List<String> results = await Future.wait([
    22.     fetchUserData(),
    23.     fetchOrders(),
    24.     fetchSettings(),
    25.   ]);
    26.  
    27.   print('All data fetched: $results');
    28. }

    使用 Future.any

    假设你在开发一个应用，需要从多个服务器中获取数据，只要任何一个服务器返回数据即可。这时你可以使用 Future.any：

    1. import 'dart:async';
    2.  
    3. void main() async {
    4.   Future<String> fetchFromServer1() async {
    5.     await Future.delayed(Duration(seconds: 2));
    6.     return 'Data from server 1';
    7.   }
    8.  
    9.   Future<String> fetchFromServer2() async {
    10.     await Future.delayed(Duration(seconds: 3));
    11.     return 'Data from server 2';
    12.   }
    13.  
    14.   Future<String> fetchFromServer3() async {
    15.     await Future.delayed(Duration(seconds: 1));
    16.     return 'Data from server 3';
    17.   }
    18.  
    19.   print('Fetching data...');
    20.  
    21.   String result = await Future.any([
    22.     fetchFromServer1(),
    23.     fetchFromServer2(),
    24.     fetchFromServer3(),
    25.   ]);
    26.  
    27.   print('First data fetched: $result');
    28. }

    3，Future.doWhile/Future.forEach

    3.1，Future.doWhile

    Future.doWhile 用于执行一个异步循环，直到条件不满足为止。循环体中的每次迭代是异步的，并且需要返回一个 Future，表示是否继续循环。

    用法

    • 适用于需要重复执行异步操作，直到某个条件不再满足的场景。

    1. import 'dart:async';
    2.  
    3. void main() async {
    4.   int counter = 0;
    5.  
    6.   print('Start');
    7.  
    8.   await Future.doWhile(() async {
    9.     counter++;
    10.     print('Counter: $counter');
    11.     await Future.delayed(Duration(seconds: 1)); // 模拟异步操作
    12.     return counter < 5; // 继续循环直到 counter >= 5
    13.   });
    14.  
    15.   print('End');
    16. }

    3.2，Future.forEach

    Future.forEach 用于对集合中的每个元素执行异步操作。它依次执行每个元素的异步操作，等待当前操作完成后再执行下一个操作。

    用法

    • 适用于需要对集合中的每个元素执行异步操作的场景。

    1. import 'dart:async';
    2.  
    3. void main() async {
    4.   List<int> numbers = [1, 2, 3, 4, 5];
    5.  
    6.   print('Start');
    7.  
    8.   await Future.forEach(numbers, (number) async {
    9.     print('Processing number: $number');
    10.     await Future.delayed(Duration(seconds: 1)); // 模拟异步操作
    11.   });
    12.  
    13.   print('End');
    14. }

    3.3，区别总结

    • 控制流方式:

      • Future.doWhile：用于执行一个异步循环，直到条件返回 false 为止。适合在不知道具体迭代次数的情况下执行重复的异步操作。

      • Future.forEach：用于对集合中的每个元素执行异步操作，适合在知道具体迭代次数的情况下对集合进行异步处理。

    • 返回类型:

      • Future.doWhile：接受一个返回 Future 的函数作为参数。

      • Future.forEach：接受一个返回 Future 的函数作为参数。

    • 终止条件:

      • Future.doWhile：循环的终止条件由函数返回的布尔值决定。

      • Future.forEach：循环的终止条件是集合中所有元素都处理完毕。

    • 应用场景:

      • Future.doWhile：适用于需要重复执行异步操作，直到某个条件不再满足的情况。

      • Future.forEach：适用于需要对集合的每个元素执行异步操作的情况。

    4，Future异常处理。

    Flutter 和 Dart 提供了几种方法来捕获和处理 Future 异常，包括使用 try-catch 语句、catchError 方法以及在异步函数中处理异常。

    4.1，try-catch

    1. import 'dart:async';
    2.  
    3. Future<void> fetchData() async {
    4.   try {
    5.     await Future.delayed(Duration(seconds: 2));
    6.     throw Exception('Failed to fetch data'); // 模拟异常
    7.   } catch (e) {
    8.     print('Caught an exception: $e');
    9.   }
    10. }
    11.  
    12. void main() async {
    13.   await fetchData();
    14.   print('Done');
    15. }

    4.2，catchError

    catchError 方法需要一个回调函数，该函数接收异常作为参数。

    1. import 'dart:async';
    2.  
    3. Future<void> fetchData() {
    4.   return Future.delayed(Duration(seconds: 2))
    5.       .then((_) {
    6.         throw Exception('Failed to fetch data'); // 模拟异常
    7.       })
    8.       .catchError((e) {
    9.         print('Caught an exception: $e');
    10.       });
    11. }
    12.  
    13. void main() async {
    14.   await fetchData();
    15.   print('Done');
    16. }
    4.2.1，使用 then 和 catchError 组合

    then 和 catchError 方法可以组合使用，以便在 Future 完成时处理结果，并在出现异常时进行错误处理。

    1. import 'dart:async';
    2.  
    3. Future<void> fetchData() {
    4.   return Future.delayed(Duration(seconds: 2))
    5.       .then((_) {
    6.         throw Exception('Failed to fetch data'); // 模拟异常
    7.       })
    8.       .catchError((e) {
    9.         print('Caught an exception: $e');
    10.       });
    11. }
    12.  
    13. void main() async {
    14.   await fetchData();
    15.   print('Done');
    16. }

    4.3，在多个 Future 中处理异常

    1. import 'dart:async';
    2.  
    3. Future<void> task1() async {
    4.   await Future.delayed(Duration(seconds: 1));
    5.   throw Exception('Error in task 1');
    6. }
    7.  
    8. Future<void> task2() async {
    9.   await Future.delayed(Duration(seconds: 2));
    10.   throw Exception('Error in task 2');
    11. }
    12.  
    13. void main() async {
    14.   try {
    15.     await Future.wait([task1().catchError((e) {
    16.       print('Caught an exception in task 1: $e');
    17.     }), task2().catchError((e) {
    18.       print('Caught an exception in task 2: $e');
    19.     })]);
    20.   } catch (e) {
    21.     print('Caught an exception: $e');
    22.   }
    23.   print('Done');
    24. }

  • 相关阅读:
    扩展ABP的Webhook功能，推送数据到第三方接口（企业微信群、钉钉群等）
    docker简单介绍 和 常用命令
    Android 11 热点(softap)流程分析
    虹科受邀参加CiA线上2022中国技术日 | 更新日程
    【Leetcode】189. 轮转数组
    JavaScript 63 JavaScript 对象 63.4 JavaScript 显示对象
    ssm及springboot整合shiro
    42. 接雨水[动态规划+双指针]
    HTML简单的个人博客网站 DIV学生网页设计作品 dreamweaver作业静态HTML网页设计模板 个人网页作业制作
    CSS选择器
  • 原文地址：https://blog.csdn.net/zdc9023/article/details/139443527