Flutter 异步编程：Futures

QfqYzqf.png!web

Flutter异步编程-Futures

本文大纲

1. 什么是Future？

2. 如何创建Future实例？

3. 一个令人迷惑的例子

4. 参考和更多阅读

1. 什么是Future？

本文小菜带大家认识和理解下 Futures 的用法以及原理。

经常听说 future，或者从其他语言见到类似的说法如 javascript 的 Promise。那么究竟什么是 future？

A future (lower case “f”) is an instance of the Future (capitalized “F”) class. A future represents the result of an asynchronous operation, and can have two states: uncompleted or completed.

https://dart.dev/codelabs/async-await

future 是 Future 类的实例，表示一个 异步操作的结果 ，这个结果会有两种状态： 未完成和已完成 。

我们可以将future理解成一个未知的盒子，盒子里包裹着一个value值，类型为T，这个盒子会被投递到你的手中，盒子没到达你的手中时处于未完成状态，到达你的手中后，打开盒子，可能是成功返回的data数据（也包括没有返回值void），也可能是失败返回的error数据。

有几个术语需要理解下：

- 同步操作 ：同步操作会阻塞后面其他的操作直至完成

- 同步函数 ：同步函数内部一定都是同步操作，顺序完成

- 异步操作 ：异步操作允许在其完成之前进行其他操作（执行其他代码）

- 异步函数 ：异步函数内部至少有一个异步操作，允许有同步操作和同步函数存在。

1.1 什么是未完成？

当我们调用一个异步函数，异步函数会返回一个未完成的 future 实例。这个 future 会等待异步函数的操作完成或者失败抛出错误异常。

1.2 什么是已完成？

当异步操作成功，future便会以操作的结果结束，否则以错误结束。

我们常常见到异步函数返回值类型为 Future<T>。Future<T>表示将来某个时间点异步操作执行成功或者失败的结果，结果类型为T。如果无返回结果，使用Future<void>表示。

所以将已完成再拆分，future可以认为有三种状态：

- Uncompleted 未完成（类似Promise的pending）

- Completed with data 成功，返回data数据（类似Promise的fulfilled）

- Complted with error 失败，返回error数据（类似Promise的rejected）

2. 如何创建Future实例？

1. 一些已有的封装api

一些常用的api或者三方库已经封装好了，直接使用，比如

final future1 = http.get("httts://www.google.com");

final future2 = SharedPreferences.getInstance();

···

2. Future类的工厂方法

eyQbmau.png!web

A) factory Future(FutureOr<T> computation())

/// factory Future(FutureOr<T> computation())

/// 创建一个包含调用computation结果的future。

final myFuture = Future(() {

return "HelloFlutter!";

});

B) factory Future.microtask(FutureOr<T> computation())

/// factory Future.microtask(FutureOr<T> computation())

/// 创建一个future，scheduleMicrotask将computation放到微任务调用处理，然后返回结果。

final myFuture = Future.microtask(() {

return "HelloFlutter!";

});

C) factory Future.sync(FutureOr<T> computation())

77ziiif.jpg!web

/// factory Future.sync(FutureOr<T> computation())

/// 创建一个future，包含立即调用computation的结果。

/// 如果结果类型为Future<T>，则直接返回

/// 如果不为Future<T>，则会创建并返回一个已经完成的future，值value为result

final myFuture = Future.sync(() {

return "HelloFlutter";

});

D) factory Future.value([FutureOr <T> value])

/// factory Future.value([FutureOr<T> value])

/// 创建一个值为value的成功态future。

final myFuture = Future.value("HelloFlutter!");

E) factory Future.error(Object error, [StackTrace stackTrace])

/// factory Future.error(Object error, [StackTrace stackTrace])

/// 创建一个error的失败态future，可选参数为堆栈信息

final myFuture = Future.error(Exception());

F) factory Future.delayed(Duration duration, [FutureOr<T> computation()])

/// factory Future.delayed(Duration duration, [FutureOr<T> computation()])

/// 创建一个延时执行computation的future

final myFuture = Future.delayed(Duration(seconds: 2), () => "HelloFlutter!");

3. 一个令人迷惑的例子

// main.dart

void main() {

runFuturesDemo();

}

// futures_demo.dart

void runFuturesDemo() async {

print("runFuturesDemo start...");

// future1 ------------------------------------

Future future1 = new Future(() => null);

future1.then((_) {

print("future1 then 1");

}).catchError((e) {

print("future1 catchError");

}).whenComplete(() {

print("future1 whenComplete");

});

// future2 ------------------------------------

Future future2 = Future(() {

print("future2 init");

});

future2.then((_) {

print("future2 then");

future1.then((_) {

print("future1 then3");

});

}).catchError((e) {

print("future2 catchError");

}).whenComplete(() {

print("future2 whenComplete");

});

future1.then((_) {

print("future1 then2");

});

// future3 ------------------------------------

Future future3 = Future.microtask(() {

print("future3 init");

});

// future4 ------------------------------------

Future future4 = Future.sync(() {

print("future4 init");

});

// future5 ------------------------------------

Future future5 = Future(() {

print("future5 init");

});

// future6 ------------------------------------

Future future6 = Future.delayed(Duration(seconds: 3), () {

print("future6 init");

});

print("runFuturesDemo end...");

}

聪明的你，思考下，打印顺序是什么呢？

深刻理解 futures 的机制，才能在复杂的业务场景中或者构建基础架构时游刃有余，立于不败之地。

下面是正确的输出，符合你的预期吗？如果不符合的话，是哪里理解不对呢？

VNjUNfQ.jpg!web

demo地址：https://github.com/dabing1022/flutter_async_programming

事实a）执行 main 函数，在 main 里面会往 microtask queue 和 event queue 中添加任务和事件, 包括注册一些回调，结束后，开启event loop

事实 b）事件循环中 microtask queue 优先级 > event queue 优先级

事实 c）从上面工厂方法 Future.sync 源码截图中可以看到，先同步执行computation（于是打印"future4 init"），根据 computation() 返回值视情况进行 Future 封箱（如果 compuation() 返回值为 Future<T>，直接返回，如果不是，则使用 _Future.value 将结果封箱）。

事实 d）为什么 7 排在 8 前面？

我们看源码 then 的注释：

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

* Register callbacks to be called when this future completes.

* When this future completes with a value,

* the [onValue] callback will be called with that value.

* If this future is already completed, the callback will not be called

* immediately, but will be scheduled in a later microtask.

因为 future1 已经 completed 了，所以 future1 在7这个位置再次用 then 注册的 callback 回调会被放在 microtask 中执行。microtask的优先级高，所以 7 会在 8 前面打印。

事实e）为什么 11 排在 9 后面而不是 7 后面？

future2 在 event queue 事件队列中排在了 future1 后面，future2 init 执行完毕后，交给 then 的回调处理，此时位置 11 处，即 future1 使用 then 注册的 callback 在 future2 的 then 的 callback 里面，所以会处在 9 后面而不是 7 后面。

flutter: runFuturesDemo start...

flutter: future4 init

flutter: runFuturesDemo end...

flutter: future3 init

flutter: future1 then 1

flutter: future1 whenComplete

flutter: future1 then2

flutter: future2 init

flutter: future2 then

flutter: future2 whenComplete

flutter: future1 then3

flutter: future5 init

flutter: future6 init

4. 如何自定义Future？

无论是在做基础架构设计还是业务设计中，常常会需要自定义 Future。我们如何自定义 Future，其实可以参考源码的写法。

关键字 Completer ！

Completer是一种可以生成以value或者error为结果的Future对象的一种方式。

大部分时候，我们创建future，可以使用上面提到的工厂方法来创建，比如

new Future(() { doSomething(); return result; });

如果future表示一个异步操作序列的结果，那么可以使用 Future.then 等来链式操作。比如

Future doStuff(){

return someAsyncOperation().then((result) {

return someOtherAsyncOperation(result);

});

}

但是如果我们想自定义一个 Future，比如我们需要将基于 callback 回调的一个 api 转化为基于 future 设计的流程，如何做呢？

这里我举个例子，我们在数据库里根据 id 查询名字：

Future queryName(int id) {

// 创建一个completer

var completer = new Completer();

// 查询数据库，然后根据成功或者失败执行相应的callback回调，这个过程是异步的

database.query("select name from user where id = $id", (results) {

completer.complete(results);

}, (error) {

completer.completeError(error);

});

// return 在query结果出来之前就会被执行

return completer.future;

}

后面我们如何使用 queryName 呢？常见两种方式来 "打开箱子" ： await 或者 then 。

1）await方式

void runFuturesDemo2() async {

try {

final name = await queryName(100);

print("id 100 user name is $name");

} catch (e) {

print(e.toString());

} finally {

print("finally finished.");

}

}

2）then方式

void runFuturesDemo2() {

queryName(100).then((name) {

print("id 100 user name is $name");

}, onError: (e) {

print(e.toString());

}).whenComplete(() {

print("finally finished.");

});

}

类似自定义 Promise 我们看下：

Q3mMRf2.png!web

Promise使用 resolve 和 reject 来执行成功或者异常，data 或者 error 在 then 的注册回调里面被使用。

自定义 Future 如下：

EZfqUve.png!web

推荐读者阅读 future.dart 和 future_impl.dart 源码。

5. 参考和更多阅读

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

- https://dart.dev/codelabs/async-await

- 阅读 future.dart 和 future_impl.dart 源码

Recommend

深入Linux并发同步

Levels of Seniority

Apache Hudi与Delta Lake对比

维基百科创始人Jimmy Wales：不支持在维基百科平台上使用加密货币

直播上课40分钟，我只听到老师的一句“可以听见吗？”

每个园区都是村，每条网络都是路

新冠疫情将导致今年的 PC 出货量下滑 3%以上

越来越多的企业主对四天工作制产生兴趣

数据库存储引擎如何利用好CPU缓存 | X-Engine内核

RunLoop总结：RunLoop的应用场景（三）滚动视图流畅性优化

About Joyk