Flutter 使用FutureBuilder請求多個接口後再渲染頁面

FutureBuilder

FutureBuilder的用法很簡單, 主要涉及兩個參數:

1、future 指定異步任務，交給 FutureBuilder 來管理；

2、builder 根據異步任務的狀態來構建不同的組件

 

FutureBuilder異步任務的狀態

狀態	描述
none	沒有連接到任何異步任務
waiting	已連接到異步任務等待被交互
active	已連接到一個已激活的異步任務
done	已連接到一個已結束的異步任務

狀態的使用

snapshot.connectionState == ConnectionState.done

只請求一個接口時

body: FutureBuilder(
        future: _futureBuilderFuture,
        builder: (context, AsyncSnapshot snapshot) {
        
        if (snapshot.connectionState == ConnectionState.done) {
            // 說明有數據
            ...
        }
      })

防止多次請求接口

這裏的 _futureBuilderFuture變量是爲了避免重複網絡請求，所以我們有了這樣的寫法：

var _futureBuilderFuture;

@override
void initState() {
    _futureBuilderFuture = getPointDetails();
    super.initState();
}

Future getPointDetails() {
    var formData = {"id": pointID != null ? pointID['pointId'] : "傳值爲空"};
    return request("getPointById", formData: formData).then((value) {
      pointDetailsResponse = value;
      print("898pointDetailsResponse:${pointDetailsResponse}");
    });
}

請求兩個接口時

// getIncident() 和 getPointDetails()是兩個請求接口的異步方法
Future getDatas() async {
    return Future.wait([getIncident(), getPointDetails()]);
}

最後將 getDatas()賦給 _futureBuilderFuture即可。