如何调用2未来函数返回未来值在FutureBuilder?

Question

我正在研究一个复杂的web应用程序，不时地，我需要从后端API获取数据。有时，我需要在future Builder中调用2个future函数来使用它们的值。然而，它使代码混乱，因为每个FutureBuilder我需要检查，如果它有数据或不返回小部件。它是这样的。

return FutureBuilder<object>(
   future: func1(),
   builder:(context, AsyncSnapshot<object> snapshot1){
      if(snapshot1.hasData){
        return FutureBuilder<object>(
        future: func2(),
        builder:(context, AsyncSnapshot<object> snapshot2){
           if(snapshot2.hasData){
              return widget;
           }else{
        return CircularProgressIndicator();
        }
      }
      ),
      }else{
         return CircularProgressIndicator();
      }
    }
);

还有其他更简单的方法吗?在那里我只能使用一个FutureBuilder，这样我就不必每次返回小部件即(CircularProgressIndicator)。谢谢。

Answer 1

首先像这样创建结果模型类:

class ResultModel{
  final object1 result1;
  final object2 result2;
  ResultModel({required this.result1, required this.result2});
}

，然后你可以创建新的future，像这样:

Future<ResultModel> _newFuture() async {
  final results = await Future.wait([func1(), func2()]);
  return ResultModel(result1: results[0], result2: results[1]);
}

然后将此传递给单个FutureBuilder:

FutureBuilder<ResultModel>(
   future: _newFuture(),
   builder:(context, AsyncSnapshot<ResultModel> snapshot1){
      if(snapshot1.hasData){
        return return widget;
      }else{
         return CircularProgressIndicator();
      }
    }
)

Answer 2

不需要像公认的答案所建议的那样使ResultModel类复杂化。如果我们需要运行3个期货呢?为3?创建新模型和4 ?

下面是简单的解决方案。请注意，如果函数返回不同的类型，可以使用List<dynamic>，并且在读取值时可以相应地强制转换。

FutureBuilder<List<dynamic>>(
   future: Future.wait([func1(), func2()]),
   builder:(context, AsyncSnapshot<List<dynamic>> snapshot1){
      if(snapshot1.hasData){
        var result1=snapshot1.data[0];
        var result1=snapshot1.data[1];
        return return widget;
      }else{
         return CircularProgressIndicator();
      }
    }
)

Answer 3

1/。如果func1和func2是独立的，可以使用

同时调用它们 Future.wait https://api.flutter.dev/flutter/dart-async/Future/wait.html

2/。如果函数2依赖于函数1。编写1个自定义函数，并在未来的构建器中使用它:

func1AndFunc2() async {
 var result = await func1();
 // check result has data
 if (result != null) {
    return func2();
 }
}