如何实现Flutter异步处理

由于大多数生产智能手机应用程序访问数据库和API,因此需要异步处理。

Flutter官方网站上有两个异步小部件。

因为我是Dart和Flutter的初学者,所以我不知道要使用哪个,但是首先我写了使用StreamBuilder的知识。 之后,我发现要使用哪种取决于情况。

我们将在Flutter的编写方法之前介绍Dart的异步处理。

Dart异步处理

Dart具有多种异步编写样式。

从①到to都相同 。 看到这个,我很困惑。

在该示例中,可以并行高效地执行③。

我将解释为什么它看起来像这个数字。

未来还是流

这样使用的API取决于要返回的数字。

如果您使用固定的API并仅显示结果,请使用Future。 如果通过UI事件(如单击)更改显示,请使用Stream。

由于Stream还可以返回一个值,因此它也可以全部变为Stream。 但是,有必要考虑使用该函数时将返回多少值,并且浪费的代码会增加。 因此,我认为您应该使用更适合您情况的东西。

  Future  asyncFunc() async { 
返回“异步返回”
}
  var asyncResult = 等待 asyncFunc(); 
打印(asyncResult);
  // vs 
  Stream  streamFunc() 异步* { 
产生“流回报”
}
  streamFunc()。listen((result){ 
打印(结果);
});

这使您可以根据自己的情况选择使用FutureBuilder还是StreamBuilder

让我们更多地了解应使用Dart的异步处理。

“等待”或“ listen()”

在大多数情况下,使用wait for编写起来更容易。

  导入'dart:async' ; 
导入'dart:io' ;
导入'dart:math' ;

main() 异步 {
等待 (endlessCountDown()中的var tick){
print( “ coutDown $ tick );
}
  // endlessCountDown()。listen((tick){ 
// print(“ coutDown $ tick”);
//});
}

Stream endlessCountDown() 异步* {
var i = pow(2,30)-1;
true ){
sleep( new Duration(seconds:1));
让我-
}
}

让我们看一个有两个流的示例,如下所示。

如果要收听两个流, 则看不到“ countUp”日志

除非流结束,否则等待不会移至下一个代码。

  导入'dart:async' ; 
导入'dart:io' ;
导入'dart:math' ;

main() 异步 {
等待 (endlessCountDown()中的var tick){
print( “ coutDown $ tick );
}
等待 (endlessCountUp()中的var行){
print( “ countUp $ line );
}
}

Stream endlessCountUp() 异步* {
var i = 0;
true ){
sleep( new Duration(seconds:1));
产生 i ++;
}
}

Stream endlessCountDown() 异步* {
var i = pow(2,30)-1;
true ){
sleep( new Duration(seconds:1));
让我-
}
}

您可以通过如下分离方法来聆听每个声音。 但是…这容易读懂吗?🤔

  导入'dart:async' ; 
导入'dart:io' ;
导入'dart:math' ;

main(){
listenCountDown();
listenCountUp();
}

listenCountDown() 异步 {
等待 (endlessCountDown()中的var tick){
print( “ coutDown $ tick );
}
}

listenCountUp() 异步 {
等待 (endlessCountUp()中的var tick){
print( “ coutUp $ tick );
}
}
...

在这种情况下,最好只使用listen()

  导入'dart:async' ; 
导入'dart:io' ;
导入'dart:math' ;

main(){
endlessCountDown()。listen((tick){
print( “ coutDown $ tick );
});
endlessCountUp()。listen((tick){
print( “ coutUp $ tick );
});
}
...

如果使用await for编写它,并且似乎多余,则最好使用listen()

您可以检查官方文件。

飞镖库之旅
了解Dart库中的主要功能。 www.dartlang.org

“ await”或“ then()”或“ await Future.wait()”

  //① 
asyncFunc1()。then((_)=> asyncFunc2())。then((result){
打印(结果);
});

//②
var asyncResult1 = 等待 asyncFunc1();
var asyncResult2 = 等待 asyncFunc2();
打印(asyncResult2);

//③
var list = 等待未来。 等待 ([asyncFunc1(),asyncFunc2()]);
打印(列表[1]);

让我们从“ await ”或“ then() ”(①或②)开始。

有效飞镖中提到了以下内容。

async / await语法提高了可读性,并允许您在异步代码中使用所有Dart控件流结构。

有效飞镖:用法
使用语言功能编写可维护代码的准则。 www.dartlang.org

我认为如果可以使用async / await ,则应该使用它。 因此,让我们使用await。

接下来,让我们看一下“ await ”和“ await Future.wait() ”。

  //② 
Stopwatch stopwatch1 = 新的 Stopwatch().. start();
var asyncResult1 = 等待 asyncFunc1();
var asyncResult2 = 等待 asyncFunc2();
打印(asyncResult2);
print( 'await()在 $ {stopwatch1。 经过的 } '中执行 );

//③
Stopwatch stopwatch2 = 新的 Stopwatch().. start();
var list = 等待未来。 等待 ([asyncFunc1(),asyncFunc2()]);
打印(列表[1]);
print( 'Future.wait()在 $ { stopwatch2。elapsed } '中执行 );
  Future  asyncFunc1() async { 
返回新的 Future.delayed( const Duration(seconds:1),()=> “ async return1” );
}

Future asyncFunc2() async {
返回新的 Future.delayed( const Duration(seconds:1),()=> “ async return2” );
}

从此比较中可以看到,如果每个Future可以同时执行,那么最好使用Future.wait(),因为它可以更早地执行。

如何使用 FutureBuilder?

您可以检查源代码

takahirom / flutter_github
通过在GitHub上创建一个帐户为flutter_github的开发做出贡献。 github.com

  @override 
小部件build(BuildContext context){
返回新的 MaterialApp(
标题: “ Flutter演示”
主题: ThemeData(
primarySwatch:颜色。 蓝色
),
主页: new FutureBuilder(未来: new Future(() async {
var令牌= 等待 AccessToken。 getInstance ().getOrCreate();
var user = 等待 fetchUser(token);
返回等待 fetchEvents(user,token);
}),构建器:(BuildContext上下文,AsyncSnapshot feedState){
如果 (feedState。error!= null ){
// TODO:错误处理
}
如果 (feedState。data == null ){
返回新的 Center(子级: 新的 CircularProgressIndicator());
}
返回新的 MyHomePage(
标题: “ Flutter演示首页” ,事件:feedState。 数据 );
}),
//此后缀逗号使构建方法的自动格式化更好。
);

结论

您可以根据此图表决定使用哪种异步机制。
由于我是Flutter的初学者,如果我做错了任何事情,请指出任何内容。