Flutter异步编程
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类的工厂方法
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())
/// 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 的机制，才能在复杂的业务场景中或者构建基础架构时游刃有余，立于不败之地。
下面是正确的输出，符合你的预期吗？如果不符合的话，是哪里理解不对呢？
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 init4. 如何自定义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 我们看下：
Promise使用 resolve 和 reject 来执行成功或者异常，data 或者 error 在 then 的注册回调里面被使用。
自定义 Future 如下：
推荐读者阅读 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 源码