Flutter第4天-Dart异步支持

Dart类库有非常多的返回Future或者Stream对象的函数。 这些函数被称为异步函数：它们只会在设置好一些耗时操作之后返回，比如像 IO操作。而不是等到这个操作完成。

async和await关键词支持了异步编程，运行您写出和同步代码很像的异步代码。

Future

Future与JavaScript中的Promise非常相似，表示一个异步操作的最终完成（或失败）及其结果值的表示。简单来说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。一个Future只会对应一个结果，要么成功，要么失败。

由于本身功能较多，这里我们只介绍其常用的API及特性。还有，请记住，Future 的所有API的返回值仍然是一个Future对象，所以可以很方便的进行链式调用。

Future.then

Future.delayed 创建了一个延时任务（实际场景会是一个真正的耗时任务，比如一次网络请求），即2秒后返回结果字符串"hi world!"，然后我们在then中接收异步结果并打印结果，代码如下：

Future.delayed(new Duration(seconds: 2),(){

return "hi world!";

}).then((data){

print(data);

});

Future.catchError

如果异步任务发生错误，我们可以在catchError中捕获错误，我们将上面示例改为：

Future.delayed(new Duration(seconds: 2),(){

//return "hi world!";

throw AssertionError("Error");

}).then((data){

//执行成功会走到这里

print("success");

}).catchError((e){

//执行失败会走到这里

print(e);

});

在本示例中，我们在异步任务中抛出了一个异常，then的回调函数将不会被执行，取而代之的是 catchError回调函数将被调用；但是，并不是只有 catchError回调才能捕获错误，then方法还有一个可选参数onError，我们也可以它来捕获异常：

Future.delayed(new Duration(seconds: 2), () {

//return "hi world!";

throw AssertionError("Error");

}).then((data) {

print("success");

}, onError: (e) {

print(e);

});

Future.whenComplete

有些时候，我们会遇到无论异步任务执行成功或失败都需要做一些事的场景，比如在网络请求前弹出加载对话框，在请求结束后关闭对话框。这种场景，有两种方法，第一种是分别在then或catch中关闭一下对话框，第二种就是使用Future的whenComplete回调，我们将上面示例改一下：

Future.delayed(new Duration(seconds: 2),(){

//return "hi world!";

throw AssertionError("Error");

}).then((data){

//执行成功会走到这里

print(data);

}).catchError((e){

//执行失败会走到这里

print(e);

}).whenComplete((){

//无论成功或失败都会走到这里

});

Future.wait

有些时候，我们需要等待多个异步任务都执行结束后才进行一些操作，比如我们有一个界面，需要先分别从两个网络接口获取数据，获取成功后，我们需要将两个接口数据进行特定的处理后再显示到UI界面上，应该怎么做？答案是Future.wait，它接受一个Future数组参数，只有数组中所有Future都执行成功后，才会触发then的成功回调，只要有一个Future执行失败，就会触发错误回调。下面，我们通过模拟Future.delayed 来模拟两个数据获取的异步任务，等两个异步任务都执行成功时，将两个异步任务的结果拼接打印出来，代码如下：

Future.wait([

// 2秒后返回结果

Future.delayed(new Duration(seconds: 2), () {

return "hello";

}),

// 4秒后返回结果

Future.delayed(new Duration(seconds: 4), () {

return " world";

})

]).then((results){

print(results[0]+results[1]);

}).catchError((e){

print(e);

});

执行上面代码，4秒后你会在控制台中看到“hello world”。

Async/await

先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

async function timeout(flag) {

if (flag) {

    return 'hello world'

} else {

    throw 'my god, failure'

}

}

console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。

console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

timeout(false).catch(err => {

console.log(err)

})

Future相当于Promise

//Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

回调地狱****(Callback hell)

如果代码中有大量异步逻辑，并且出现大量异步任务依赖其它异步任务的结果时，必然会出现Future.then回调中套回调情况。举个例子，比如现在有个需求场景是用户先登录，登录成功后会获得用户Id，然后通过用户Id，再去请求用户个人信息，获取到用户个人信息后，为了使用方便，我们需要将其缓存在本地文件系统，代码如下：

//先分别定义各个异步任务

Future<String> login(String userName, String pwd){

...

//用户登录

};

Future<String> getUserInfo(String id){

...

//获取用户信息 

};

Future saveUserInfo(String userInfo){

...

// 保存用户信息 

};

接下来，执行整个任务流：

login("alice","******").then((id){

//登录成功后通过，id获取用户信息

getUserInfo(id).then((userInfo){

//获取用户信息后保存 

saveUserInfo(userInfo).then((){

   //保存用户信息，接下来执行其它操作

    ...

});

});

})

可以感受一下，如果业务逻辑中有大量异步依赖的情况，将会出现上面这种在回调里面套回调的情况，过多的嵌套会导致的代码可读性下降以及出错率提高，并且非常难维护，这个问题被形象的称为回调地狱（****Callback hell****）。回调地狱问题在之前JavaScript中非常突出，也是JavaScript被吐槽最多的点，但随着ECMAScript6和ECMAScript7标准发布后，这个问题得到了非常好的解决，而解决回调地狱的两大神器正是ECMAScript6引入了Promise，以及ECMAScript7中引入的async/await。 而在Dart中几乎是完全平移了JavaScript中的这两者：Future相当于Promise，而async/await连名字都没改。接下来我们看看通过Future和async/await如何消除上面示例中的嵌套问题。

使用****Future****消除****callback hell

login("alice","******").then((id){

  return getUserInfo(id);

}).then((userInfo){

return saveUserInfo(userInfo);

}).then((e){

//执行接下来的操作

}).catchError((e){

//错误处理

print(e);

});

正如上文所述， “Future的所有API的返回值仍然是一个Future对象，所以可以很方便的进行链式调用” ，如果在then中返回的是一个Future的话，该future会执行，执行结束后会触发后面的then回调，这样依次向下，就避免了层层嵌套。

使用****async/await****消除****callback hell

通过Future回调中再返回Future的方式虽然能避免层层嵌套，但是还是有一层回调，有没有一种方式能够让我们可以像写同步代码那样来执行异步任务而不使用回调的方式？答案是肯定的，这就要使用async/await了，下面我们先直接看代码，然后再解释，代码如下：

task() async {

try{

String id = await login("alice","******");

String userInfo = await getUserInfo(id);

await saveUserInfo(userInfo);

//执行接下来的操作   

} catch(e){

//错误处理   

print(e);   

}

}

• async用来表示函数是异步的，定义的函数会返回一个Future对象，可以使用then方法添加回调函数。
• await 后面是一个Future，表示等待该异步任务完成，异步完成后才会往下走；await必须出现在 async函数内部。

可以看到，我们通过async/await将一个异步流用同步的代码表示出来了。

其实，无论是在JavaScript还是Dart中，async/await都只是一个语法糖，编译器或解释器最终都会将其转化为一个Promise（Future）的调用链。

Stream

Stream 也是用于接收异步事件数据，和Future 不同的是，它可以接收多个异步操作的结果（成功或失败）。 也就是说，在执行异步任务时，可以通过多次触发成功或失败事件来传递结果数据或错误异常。 Stream 常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等。举个例子：

Stream.fromFutures([

// 1秒后返回结果

Future.delayed(new Duration(seconds: 1), () {

return "hello 1";

}),

// 抛出一个异常

Future.delayed(new Duration(seconds: 2),(){

throw AssertionError("Error");

}),

// 3秒后返回结果

Future.delayed(new Duration(seconds: 3), () {

return "hello 3";

})

]).listen((data){

print(data);

}, onError: (e){

print(e.message);

},onDone: (){

});

上面的代码依次会输出：

I/flutter (17666): hello 1

I/flutter (17666): Error

I/flutter (17666): hello 3

dart语言-Flutter-Dart中的异步

Even-Looper

Dart是单线程模型，也就没有了所谓的主线程/子线程之分。Dart也是Event-Looper以及Event-Queue的模型，所有的事件都是通过EventLooper的依次执行。

而Dart的Event Loop就是：

• 从EventQueue中获取Event
• 处理Event
• 直到EventQueue为空

image.png

而这些Event包括了用户输入，点击，Timer，文件IO等

image.png

单线程模型

一旦某个Dart的函数开始执行，它将执行到这个函数结束，也就是Dart的函数不会被其他Dart代码打断。Dart中没有线程的概念，只有isolate，每个isolate都是隔离的，并不会共享内存。

而一个Dart程序是在Main isolate的main函数开始，而在Main函数结束后，Main isolate线程开始一个一个（one by one）的开始处理Event Queue中的每一个Event。

image.png

Event Queue****以及****Microtask Queue

Dart中的Main Isolate只有一个Event Looper，但是存在两个Event Queue:Event Queue以及Microtask Queue

Microtask Queue存在的意义是：希望通过这个Queue来处理稍晚一些的事情，但是在下一个消息到来之前需要处理完的事情。

当Event Looper正在处理Microtask Queue中的Event时候，Event Queue中的Event就停止了处理了，此时App不能绘制任何图形，不能处理任何鼠标点击，不能处理文件IO等等

Event-Looper挑选Task的执行顺序为：

• 优先全部执行完Microtask Queue中的Event
• 直到Microtask Queue为空时，才会执行Event Queue中的Event

image.png

Dart中只能知道Event处理的先后顺序，但是并不知道某个Event执行的具体时间点，因为它的处理模型是一个单线程循环，而不是基于时钟调度（即它的执行只是按照Event处理完，就开始循环下一个Event，而与Java中的Thread调度不一样，没有时间调度的概念），也就是我们既是指定另一个Delay Time的Task，希望它在预期的时间后开始执行，它有可能不会在那个时间执行，需要看是否前面的Event是否已经Dequeue。

异步任务调度

当有代码可以在后续任务执行的时候，有两种方式，通过dart:async这个Lib中的API即可：

• 使用Future类，可以将任务加入到Event Queue的队尾
• 使用scheduleMicrotask函数，将任务加入到Microtask Queue队尾

当使用EventQueue时，需要考虑清楚，尽量避免microtask queue过于庞大，否则会阻塞其他事件的处理

image.png

一般常用的Future构造函数：

new Future((){

//  doing something

});

而一般常用的还有当有分治任务时，需要将一个大任务拆成很多小任务一步步执行时，就需要使用到Future.then函数来拆解任务

void main(){

new Future(() => futureTask) // 异步任务的函数

    .then((m) => "futueTask execute result:$m")  //   任务执行完后的子任务

    .then((m) => m.length)  //  其中m为上个任务执行完后的返回的结果

    .then((m) => printLength(m))

    .whenComplete(() => whenTaskCompelete);  //  当所有任务完成后的回调函数

}

int futureTask() {

return 21; 

}

void printLength(int length) {

print("Text Length:$length");

}

void whenTaskCompelete() {

print("Task Complete");

}

串行任务执行。

当任务需要延迟执行时，可以使用new Future.delay来将任务延迟执行，而如上所述，只有当Main isolate的Event Queue处于Idle的状态时，才会延迟1s执行，否则等待的时间会比1s长很多

new Future.delayed(const Duration(seconds: 1), () => futureTask);

• Future中的then并没有创建新的Event丢到Event Queue中，而只是一个普通的Function Call，在FutureTask执行完后，立即开始执行
• 当Future在then函数先已经执行完成了，则会创建一个task，将该task的添加到microtask queue中，并且该任务将会执行通过then传入的函数
• Future只是创建了一个Event，将Event插入到了Event Queue的队尾
• 使用Future.value构造函数的时候，就会和第二条一样，创建Task丢到microtask Queue中执行then传入的函数
• Future.sync构造函数执行了它传入的函数之后，也会立即创建Task丢到microtask Queue中执行

使用****scheduleMicrotask

在最顶层的调用关系中，使用该函数即可

async.scheduleMicrotask(() => microtask());

void microtask(){

// doing something

}

使用****isolate****以及****Worker

当有计算很繁重的任务时，则需要使用isolate或者Worker来执行，以保持App对用户操作的及时响应。Isolate的实现可能是一个单独的线程，或者一个单独的进程，需要看Dart VM是如何实现的。