构建方法不等待异步

Question

我是 Flutter 的新手，我对 async 和 await 有一些问题。 我想，首先从服务器获取一些数据，然后构建我的小部件，但我的构建方法不等待 getData 并且我的构建中的一个小部件无法在没有任何数据的情况下运行。 我想要一个等到数据来自服务器然后运行构建方法的函数。

Map<String,dynamic> data = Map<String,dynamic>();
 Future getData() async{
    String url = "http://10.0.2.2:8080/facts/get.php";
    http.Response responseData = await http.get(url);
  setState(() {
     data = json.decode(responseData.body); 
  });
}
@override
void initState()  {
  super.initState();
  getData();
}

Answer 1

我建议使用FutureBuilder 而不是将async 函数放在initState 中。为此，您需要更改 getData 方法。

示例

您的状态有一个名为 dbFuture 的 Future 变量

Future<Map<String, dynamic>> dbFuture;

你的getData 方法应该是这样的：

 Future<Map<String,dynamic>> getData() async{
    String url = "http://10.0.2.2:8080/facts/get.php";
    http.Response responseData = await http.get(url);
    return json.decode(responseData.body); 
}

让我们在 initState 中发出网络请求，无需等待结果，只需将其分配给我们的 Future 变量：dbFuture

initState(){
  dbFuture = getData();
  super.initState();
}

在build 方法中：

FutureBuilder(
      future: dbFuture,
      builder: (BuildContext context,AsyncSnapshot snapshot){
        if(snapshot.connectionState != ConnectionState.done){
          return Container(); // your widget while loading
        }

        if(!snapshot.hasData){
          return Container(); //your widget when error happens
        }

        final data = snapshot.data; //your Map<String,dynamic>
        return yourScreen(); //place your widget here
      },
    );

您可以参考文档中的FutureBuilder 小部件以获取更多信息。

注意：我们不使用方法作为 Future，而是使用 Future 变量并在 initState() 中进行异步调用，这样我们会提前一点发出请求并防止不必要的网络调用。