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即可。