異步async、await和Future的使用技巧

由於前面的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的人肉翻譯或者官網閱讀理解吧。

 

from: https://segmentfault.com/a/1190000014396421