Flutter 异步编程 Future、FutureBuilder，await 与 async

Bertha 。 2023-05-22 04:39 29阅读 0赞

### 文章目录 ###

*   *  Future 是什么？
     *   *  基本用法
         *   *  Future.value(value)
             *  Future.error()
             *  Future.delayed()
             *  Future.then()
             *  Future.catchError()
             *  Future.whenComplete()
     *  FutureBuilder
     *  await 与 async
     *  参考

## Future 是什么？ ##

> 在之前的文章中，我们已经使用了`Future`。如文件操作、`SharedPreferences`都会返回一个`Future`。[【Flutter 本地数据存储（文件、SharedPreferences 、数据库 sqlite）使用示例】][Flutter _SharedPreferences _ sqlite]。

`dart api`文档中对`Future`的描述是表示延迟计算的对象。

在文件操作中使用`Future`是因为文件读取是耗时操作，不能马上返回结果，通过`Future`延迟之后，我们可以在回调中获取到文件读取之后的结果。

而`Future`的回调返回有两种方式，带有值（`futuresuccess`）返回或错误（`futuresfuture`）返回。

我们可以把`Future`想象为一个装有数据的盒子，在一段时间后打开。盒子打开之后，里面有可能有我们想要的东西 `value`，也有可能不是我们想要的东西`error`。

所以`future`就存在三个状态：

*  盒子未打开状态（构造阶段）
 *  盒子打开里面有我们想要的 `value`（成功返回）
 *  盒子打开但是里面不是我们想要的 `value`（失败返回）

下面根据这三种状态来介绍`Future`的使用

### 基本用法 ###

`Flutter`中很多方法会直接返回`Future`对象，例如：

final myFuture = SharedPreferences.getInstance();

有时候我们也会通过构造函数直接`new Future`来获取`Future`实例。

final myFuture = Future();

#### Future.value(value) ####

> 创建已知`value`的`Future`。当您构建使用缓存的服务时，此构造函数很有用。

使用示例如下：

final myFuture = Future.value(12);

#### Future.error() ####

> 创建已知`error`的`Future`。和`Future.value()`类似

使用示例如下：

final myFuture = Future.error(ArgumentError.notNull('input'));

#### Future.delayed() ####

> 创建一个延迟执行的`Future`。在 [Flutter 使用 dio 库实现网络请求及 Json 数据解析示例][Flutter _ dio _ Json] 中我们对 `dio` 进行了二次封装，在`showLoading`的时候想显示弹窗，但是这时候`showDialog`中的`context`还没获取到，所以我们需要延迟之后才显示弹窗。

使用示例如下：

Future.delayed(Duration(milliseconds: 200)).then((e) {
      // 延迟之后的操作
    });

以上的返回结果都是`Future`，也就是完成了`Future`的第一个状态，构建。  
接着通过`then()`就可以获取到我们真正需要的值或者通过`catchError()`来捕获错误信息。

#### Future.then() ####

> 处理正确的返回结果。只有单个参数，并且`then`返回的还是`Future`对象，因此可以一直链式调用`then`方法

该方法返回泛型的`onValue`数据，以及可选命名函数`onError`，`onError`回调必须接受一个或两个参数，如果`onError`接受两个参数，则同时使用**错误和堆栈跟踪**进行调用，否则仅使用错误对象进行调用。

Future<R> then<R>(FutureOr<R> onValue(T value), {Function onError});

示例：  
![在这里插入图片描述][20200419155455434.png]

Future.delayed(Duration(seconds: 1)).then((value) {
      print("第一个 then");
    }).then((value) {
      print("第二个 then");
    });

如果我们在执行的时候遇到了`error`可以通过`catchError`来捕捉错误信息，当有错误时就不走`then`回调，直接走`catchError`回调。

#### Future.catchError() ####

> 它的工作原理与`then（）`相同，除了它接受一个`error`而不是一个`value`，且会返回一个`error`的`Future`

该方法返回`onError`回调，以及可选命名函数`test`，以在调用回调之前检查错误。

Future<T> catchError(Function onError, {bool test(Object error)});

示例：  
![在这里插入图片描述][20200419160216784.png]

Future.delayed(Duration(seconds: 3),
          () => throw 'Error!', // Complete with an error.
    ).then((value) {
      print(value);
    }).catchError((err) {
      print('Caught $err'); // Handle the error.
    },test: (e){
      return e is String;
    });
    print('Waiting for a value...');

`Future`还提供了类似于`try-catch-finally`中的`finally`块，`whenComplete()`方法

#### Future.whenComplete() ####

> 不够执行成功或者失败都会执行`whenComplete()`方法，并返回一个`Future`。类似于`try-catch-finally`中的`finally`块。

示例：  
![在这里插入图片描述][20200419171617495.png]

Future.delayed(Duration(seconds: 3),
              () => throw 'Error!', // Complete with an error.
        ).then((value) {
          print(value);
        }).catchError((err) {
          print('Caught $err'); // Handle the error.
        },test: (e){
          return e is String;
        }).whenComplete((){
          print('whenComplete');
        });
        print('Waiting for a value...');

`Flutter`还提供了`FutureBuilder widget`用于异步动态更新`UI`

## FutureBuilder ##

> 基于与`Future`交互的`widget`，并根据`snapshots`中的状态用不同`widget`去构建。

既然是个`widget`,我们看一下构造函数：

const FutureBuilder({
        Key key,
        this.future,// Future 对象
        this.initialData,// 初始化的数据，在 Future 对象创建完成之前给 snapshots 提供数据
        @required this.builder,// 构建器提供了一个 AsyncSnapshot 对象，该对象的 AsyncSnapshot.connectionState 属性有：none（Future 为null），waiting（Future 为等待状态），done（Future 为结束状态）
      })

示例：  
![在这里插入图片描述][20200419184358974.gif]  
以上效果源码可查看 `FutureBuilder`源码(`async.dart`文件)`504-562`行。

## await 与 async ##

> 在使用`Future`的时候，如果有太多异步任务，那么代码的嵌套层级将会很深。`dart`中提供了和`JavaScript`中一样的方式来解决异步代码层级过深问题，那就是通过`async 和 await`关键字。

`async 和 await`关键字提供了一种声明性的方式来定义异步函数并使用其结果。  
使用`async`和`await`时，请记住以下两个基本准则：

*  要定义异步函数，请在函数主体之前添加`async`
 *  `await`关键字仅在异步函数中起作用

**[文档][Link 1]** 中的`同步异步对比`例子：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
主要区别有以上三点

*  异步函数主体前增加了 `async` 关键字
 *  异步函数使用 `await` 关键字接收值
 *  在使用`async`关键字时需要将返回值转为用`Future<原返回值类型>`

## 参考 ##

*  [YouTube-Flutter 异步编程之 Future][YouTube-Flutter _ Future]
 *  [Dart asynchronous programming: Futures][Dart asynchronous programming_ Futures]
 *  [Future class][]
 *  [YouTube-Flutter 异步编程之 async & await][YouTube-Flutter _ async _ await]
 *  [Asynchronous programming: futures, async, await][Link 1]

[Flutter _SharedPreferences _ sqlite]: https://blog.csdn.net/ITxiaodong/article/details/105423782
[Flutter _ dio _ Json]: https://longyi.blog.csdn.net/article/details/105423731
[20200419155455434.png]: /images/20230521/936de7e17625460f8523f5c3b4b5390f.png
[20200419160216784.png]: /images/20230521/0551d978008741859bdc212be0cd9a0e.png
[20200419171617495.png]: /images/20230521/89eda57baee84bbba1fba0c10464cf73.png
[20200419184358974.gif]: /images/20230521/3c654fc106414d5d9bb3003943ecefc8.png
[Link 1]: https://dart.dev/codelabs/async-await
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230521/46fde38c8dac4c2796c7b7afa259e1dd.png
[YouTube-Flutter _ Future]: https://www.youtube.com/watch?v=OTS-ap9_aXc
[Dart asynchronous programming_ Futures]: https://medium.com/dartlang/dart-asynchronous-programming-futures-96937f831137
[Future class]: https://api.dart.dev/stable/2.7.2/dart-async/Future-class.html
[YouTube-Flutter _ async _ await]: https://www.youtube.com/watch?v=SmTCmDMi4BY