1.Dart的異步模型

1.1 Dart是單線程的

開發(fā)中的耗時操作：

在開發(fā)中，我們經(jīng)常會遇到一些耗時的操作需要完成，比如網(wǎng)絡請求、文件讀取等等；
如果我們的主線程一直在等待這些耗時的操作完成，那么就會進行阻塞，無法響應其它事件，比如用戶的點擊；
顯然，我們不能這么干！！

如何處理耗時的操作呢？

針對如何處理耗時的操作，不同的語言有不同的處理方式。
* 處理方式一： 多線程，比如Java、C++，我們普遍的做法是開啟一個新的線程（Thread），在新的線程中完成這些異步的操作，再通過線程間通信的方式，將拿到的數(shù)據(jù)傳遞給主線程。
* 處理方式二： 單線程+事件循環(huán)，比如JavaScript、Dart都是基于單線程加事件循環(huán)來完成耗時操作的處理。不過單線程如何能進行耗時的操作呢？！

1.2 Dart事件循環(huán)

單線程模型中主要就是在維護著一個事件循環(huán)（Event Loop）。

事件循環(huán)是什么呢？
事實上事件循環(huán)并不復雜，它就是將需要處理的一系列事件（包括點擊事件、IO事件、網(wǎng)絡事件）放在一個事件隊列（Event Queue）中。
不斷的從事件隊列（Event Queue）中取出事件，并執(zhí)行其對應需要執(zhí)行的代碼塊，直到事件隊列清空位置

2.Dart的異步操作

Dart中的異步操作主要使用Future以及async、await。

import "dart:io";

main(List<String> args) {
  print("main function start");
  var future = getNetworkData();
  future.then((value) {
    print(value);
  }).catchError((error) {
    // 捕獲出現(xiàn)異常時的情況
    print(error);
  });
  print(future);
  print("main function end");
}

Future<String> getNetworkData() {
  return Future<String>(() {
    sleep(Duration(seconds: 3));
    // 不再返回結(jié)果，而是出現(xiàn)異常
    // return "network data";
    throw Exception("網(wǎng)絡請求出現(xiàn)錯誤");
  });
}

2.1 Future的鏈式調(diào)用

上面代碼我們可以進行如下的改進：

• 我們可以在then中繼續(xù)返回值，會在下一個鏈式的then調(diào)用回調(diào)函數(shù)中拿到返回的結(jié)果

import "dart:io";

main(List<String> args) {
  print("main function start");

  getNetworkData().then((value1) {
    print(value1);
    return "content data2";
  }).then((value2) {
    print(value2);
    return "message data3";
  }).then((value3) {
    print(value3);
  });

  print("main function end");
}

Future<String> getNetworkData() {
  return Future<String>(() {
    sleep(Duration(seconds: 3));
     return "network data1";
  });
}

2.2 案例代碼

• await關(guān)鍵字必須存在于async函數(shù)中
• 使用async標記的函數(shù)，必須返回一個Future對象

Future<String> getNetworkData() async {
  var result = await Future.delayed(Duration(seconds: 3), () {
    return "network data";
  });

  return "請求到的數(shù)據(jù)：" + result;
}

我們現(xiàn)在可以像同步代碼一樣去使用Future異步返回的結(jié)果；
等待拿到結(jié)果之后和其他數(shù)據(jù)進行拼接，然后一起返回；
返回的時候并不需要包裝一個Future，直接返回即可，但是返回值會默認被包裝在一個Future中；

3.微任務隊列

我們知道Dart中有一個事件循環(huán)（Event Loop）來執(zhí)行我們的代碼，里面存在一個事件隊列（Event Queue），事件循環(huán)不斷從事件隊列中取出事件執(zhí)行。

3.1 但是如果我們嚴格來劃分的話，在Dart中還存在另一個隊列：微任務隊列（Microtask Queue）。

• 微任務隊列的優(yōu)先級要高于事件隊列；

• 也就是說事件循環(huán)都是優(yōu)先執(zhí)行微任務隊列中的任務，再執(zhí)行 事件隊列 中的任務；

3.2 那么在Flutter開發(fā)中，哪些是放在事件隊列，哪些是放在微任務隊列呢？

• 所有的外部事件任務都在事件隊列中，如IO、計時器、點擊、以及繪制事件等；

• 而微任務通常來源于Dart內(nèi)部，并且微任務非常少。這是因為如果微任務非常多，就會造成事件隊列排不上隊，會阻塞任務隊列的執(zhí)行（比如用戶點擊沒有反應的情況）；

3.4 說到這里，你可能已經(jīng)有點凌亂了，在Dart的單線程中，代碼到底是怎樣執(zhí)行的呢？

• 1）Dart的入口是main函數(shù)，所以main函數(shù)中的代碼會優(yōu)先執(zhí)行；

• 2）main函數(shù)執(zhí)行完后，會啟動一個事件循環(huán)（Event Loop）就會啟動，啟動后開始執(zhí)行隊列中的任務；

• 3）首先，會按照先進先出的順序，執(zhí)行 微任務隊列（Microtask Queue）中的所有任務；

• 4）其次，會按照先進先出的順序，執(zhí)行 事件隊列（Event Queue）中的所有任務；

  
  
  image.png

3.5 如何創(chuàng)建微任務

在開發(fā)中，我們可以通過dart中async下的scheduleMicrotask來創(chuàng)建一個微任務：

import "dart:async";

main(List<String> args) {
  scheduleMicrotask(() {
    print("Hello Microtask");
  });
}

3.6 Future的代碼是加入到事件隊列還是微任務隊列呢？

Future中通常有兩個函數(shù)執(zhí)行體：

• Future構(gòu)造函數(shù)傳入的函數(shù)體
• then的函數(shù)體（catchError等同看待）

那么它們是加入到什么隊列中的呢？

• Future構(gòu)造函數(shù)傳入的函數(shù)體放在事件隊列中
• then的函數(shù)體要分成三種情況：
• 情況一：Future沒有執(zhí)行完成（有任務需要執(zhí)行），那么then會直接被添加到Future的函數(shù)執(zhí)行體后；
• 情況二：如果Future執(zhí)行完后就then，該then的函數(shù)體被放到如微任務隊列，當前Future執(zhí)行完后執(zhí)行微任務隊列；
• 情況三：如果Future是鏈式調(diào)用，意味著then未執(zhí)行完，下一個then不會執(zhí)行；

// future_1加入到eventqueue中，緊隨其后then_1被加入到eventqueue中
Future(() => print("future_1")).then((_) => print("then_1"));

// Future沒有函數(shù)執(zhí)行體，then_2被加入到microtaskqueue中
Future(() => null).then((_) => print("then_2"));

// future_3、then_3_a、then_3_b依次加入到eventqueue中
Future(() => print("future_3")).then((_) => print("then_3_a")).then((_) => print("then_3_b"));

3.7 代碼執(zhí)行順序案例

我們根據(jù)前面的規(guī)則來學習一個終極的代碼執(zhí)行順序案例：

import "dart:async";

main(List<String> args) {
  print("main start");

  Future(() => print("task1"));
    
  final future = Future(() => null);

  Future(() => print("task2")).then((_) {
    print("task3");
    scheduleMicrotask(() => print('task4'));
  }).then((_) => print("task5"));

  future.then((_) => print("task6"));
  scheduleMicrotask(() => print('task7'));

  Future(() => print('task8'))
    .then((_) => Future(() => print('task9')))
    .then((_) => print('task10'));

  print("main end");
}

代碼執(zhí)行的結(jié)果是：

main start
main end
task7
task1
task6
task2
task3
task5
task4
task8
task9
task10

代碼分析：

1、main函數(shù)先執(zhí)行，所以main start和main end先執(zhí)行，沒有任何問題；
2、main函數(shù)執(zhí)行過程中，會將一些任務分別加入到EventQueue和MicrotaskQueue中；
3、task7通過scheduleMicrotask函數(shù)調(diào)用，所以它被最早加入到MicrotaskQueue，會被先執(zhí)行；
4、然后開始執(zhí)行EventQueue，task1被添加到EventQueue中被執(zhí)行；
5、通過final future = Future(() => null);創(chuàng)建的future的then被添加到微任務中，微任務直接被優(yōu)先執(zhí)行，所以會執(zhí)行task6；
6、依次在EventQueue中添加task2、task3、task5被執(zhí)行；
7、task3的打印執(zhí)行完后，調(diào)用scheduleMicrotask，那么在執(zhí)行完這次的EventQueue后會執(zhí)行，所以在task5后執(zhí)行task4（注意：scheduleMicrotask的調(diào)用是作為task3的一部分代碼，所以task4是要在task5之后執(zhí)行的）
8、task8、task9、task10一次添加到EventQueue被執(zhí)行；

事實上，上面的代碼執(zhí)行順序有可能出現(xiàn)在面試中，我們開發(fā)中通常不會出現(xiàn)這種復雜的嵌套，并且需要完全搞清楚它的執(zhí)行順序；

但是，了解上面的代碼執(zhí)行順序，會讓你對EventQueue和microtaskQueue有更加深刻的理解。

學習內(nèi)容來自Flutter從入門到實戰(zhàn)