由於前面的HTTP請求用到了異步操作，不少小夥伴都被這個問題折了下腰，今天總結分享下實戰成果。Dart是一個單線程的語言，遇到有延遲的運算（比如IO操作、延時執行）時，線程中按順序執行的運算就會阻塞，用戶就會感覺到卡頓，於是通常用異步處理來解決這個問題。當遇到有需要延遲的運算（async）時，將其放入到延遲運算的隊列（await）中去，把不需要延遲運算的部分先執行掉，最後再來處理延遲運算的部分。
async和await
首先看一個案例：
//HTTP的get請求返回值爲Future<String>類型，即其返回值未來是一個String類型的值
getData() async { //async關鍵字聲明該函數內部有代碼需要延遲執行
return await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"}); //await關鍵字聲明運算爲延遲執行，然後return運算結果
}
然後我們調用這個函數，想獲取其結果：
String data = getData();
在書寫時，在IDE中這個代碼是沒有問題的，但是當我們運行這段代碼時，就報錯了：
爲什麼呢？因爲data是String類型，而函數getData()是一個異步操作函數，其返回值是一個await延遲執行的結果。在Dart中，有await標記的運算，其結果值都是一個Future對象，Future不是String類型，所以就報錯了。
那如果這樣的話，我們就沒法獲取到延遲執行的結果了？當然可以，Dart規定有async標記的函數，只能由await來調用，比如這樣：
String data = await getData();
但是要使用await，必須在有async標記的函數中運行，否則這個await會報錯：
於是，我們要爲這個給data賦值的語句加一個async函數的包裝：
String data;
setData() async {
data = await getData(); //getData()延遲執行後賦值給data
}
上面這種方法一般用於調用封裝好的異步接口，比如
getData()被封裝到了其他dart文件，通過使用async函數對其調取使用
再或者，我們去掉async函數的包裝，在getData()中直接完成data變量的賦值：
String data;
getData() async {
data = await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"}); //延遲執行後賦值給data
}
這樣，data就獲取到HTTP請求的數據了。就這樣就完了？是滴，只要記住兩點：
-
await關鍵字必須在async函數內部使用 - 調用
async函數必須使用await關鍵字
PS：
await關鍵字真的很形象，等一等的意思，就是說，既然你運行的時候都要等一等，那我調用的時候也等一等吧
Future簡單科普
前面個講到過，直接return await ...的時候，實際上返回的是一個延遲計算的Future對象，這個Future對象是Dart內置的，有自己的隊列策略，我們就來聊聊這個Future。
先囉嗦一些關於Dart在線程方面的知識。
Dart是基於單線程模型的語言。在Dart也有自己的進程（或者叫線程）機制，名叫isolate。APP的啓動入口main函數就是一個isolate。玩家也可以通過引入import 'dart:isolate'創建自己的isolate，對多核CPU的特性來說，多個isolate可以顯著提高運算效率，當然也要適當控制isolate的數量，不應濫用，否則走火入魔自廢武功。有一個很重要的點，Dart中isolate之間無法直接共享內存，不同的isolate之間只能通過isolate API進行通信，當然本篇的重點在於Future，不展開講isolate，心急的小夥伴可以參考官方閱讀理解或者參考大神tain335的人肉翻譯。
Dart線程中有一個消息循環機制（event loop）和兩個隊列（event queue和microtask queue）。
event queue包含所有外來的事件：I/O，mouse events，drawing events，timers，isolate之間的message等。任意isolate中新增的event（I/O，mouse events，drawing events，timers，isolate的message）都會放入event queue中排隊等待執行，好比機場的公共排隊大廳。
microtask queue只在當前isolate的任務隊列中排隊，優先級高於event queue，好比機場裏的某個VIP候機室，總是VIP用戶先登機了，纔開放公共排隊入口。
如果在event中插入microtask，當前event執行完畢即可插隊執行microtask。如果沒有microtask，就沒辦法插隊了，也就是說，microtask queue的存在爲Dart提供了給任務隊列插隊的解決方案。
當main方法執行完畢退出後，event loop就會以FIFO(先進先出)的順序執行microtask，當所有microtask執行完後它會從event queue中取事件並執行。如此反覆，直到兩個隊列都爲空，如下流程圖：
注意：當事件循環正在處理microtask的時候，event queue會被堵塞。這時候app就無法進行UI繪製，響應鼠標事件和I/O等事件。胡亂插隊也是有代價的~
雖然你可以預測任務執行的順序，但你無法準確的預測到事件循環何時會處理你期望的任務。例如當你創建一個延時1s的任務，但在排在你之前的任務結束前事件循環是不會處理這個延時任務的，也就是或任務執行可能是大於1s的。
OK，瞭解以上信息之後，再來回到Future，小夥伴可能已經被繞暈了。
Future就是event，很多Flutter內置的組件比如前幾篇用到的Http（http請求控件）的get函數、RefreshIndicator（下拉手勢刷新控件）的onRefresh函數都是event。每一個被await標記的句柄也是一個event，每創建一個Future就會把這個Future扔進event queue中排隊等候安檢~
什麼？那microtask呢？當然不會忘了這個，scheduleMicrotask，用法和Future基本一樣。
爲什麼要用Future？
前面講到，用async和await組合，即可向event queue中插入event實現異步操作，好像Future的存在有些多餘的感覺，剛開始我本人也有這樣的疑惑，且往下看。
當定義Flutter函數時，還可以指定其運行結果返回值的類型，以提高代碼的可讀性：
//定義了返回結果值爲String類型
Future<String> getDatas(String category) async {
var request = await _httpClient.getUrl(Uri.parse(url));
var response = await request.close();
return await response.transform(utf8.decoder).join();
}
run() async{
int data = await getDatas('keji'); //因爲類型不匹配，IDE會報錯
}
Future最主要的功能就是提供了鏈式調用。熟悉ES6語法的小夥伴樂開了花，鏈式調用解決兩大問題：明確代碼執行的依賴關係和實現異常捕獲。WTF?還不明白？且看下面這些案例：
//案例1
funA() async{
...set an important variable...
}
funB() async{
await funA();
...use the important variable...
}
main() async {
funB();
}
//如果要想先執行funA再執行funB，必須在funB中await funA();
//funB的代碼與funA耦合，將來如果funA廢掉或者改動，funB中還需要經過修改以適配變更。
//案例2
funA() async{
try{
...set an important variable...
}catch(e){
do sth...
}finally{
do sth. else...
}
}
funB() async{
try{
...use the important variable...
}catch(e){
do sth...
}finally{
do sth. else...
}
}
main() async {
await funA();
await funB();
}
//沒有明確體現出設置變量和使用變量之間的依賴關係，其他開發者難以理解你的代碼邏輯，代碼維護困難
//並且如果爲了防止funA()或者funB()因發生異常導致程序崩潰
//要到funA()或者funB()中分別加入`try`、`catch`、`finally`
爲了解決上面的問題，Future提供了一套非常簡潔的解決方案：
//案例3
funA(){
...set an important variable... //設置變量
}
funB(){
...use the important variable... //使用變量
}
main(){
new Future.then(funA()).then(funB()); // 明確表現出了後者依賴前者設置的變量值
new Future.then(funA()).then((_) {new Future(funB())}); //還可以這樣用
//鏈式調用，捕獲異常
new Future.then(funA(),onError: (e) { handleError(e); }).then(funB(),onError: (e) { handleError(e); })
}
案例3的玩法是async和await無法企及的，因此掌握Future還是很有必要滴。當然了，Future的玩法不僅僅侷限於案例3，還有很多有趣的玩法，包括和microtask對象scheduleMicrotask配合使用，我這裏就不一一介紹了，大家參考大神tain335的人肉翻譯或者官網閱讀理解吧。
總結
Dart的isolate中加入了event queue和microtask queue後，有了一點協程的感覺，或許這就是Flutter爲啥在性能上敢和原生開發叫板的原因之一吧。本篇的內容比較抽象，如果還是有不明白的小夥伴，歡迎留言提問，我儘量回答，哈哈哈，就醬，歡迎加入到Flutter圈子或flutter 中文社區（官方QQ羣：338252156），羣裏有前後端及全棧各路大神鎮場子，加入進來沒事就寫寫APP掙點外快（這個真的有），順便翻譯翻譯官方英文原稿拉一票粉絲，一舉多得何樂而不爲呢。