dart以同步方式调用异步函数引发的时序bug

在写代码的时候,碰到了一个时序问题,记录下来。

背景

问题是这样的,一开始是需要读取数据库里面的数据,读到数据之后把数据赋值给状态管理器riverpod,然后列表自动刷新,因为列表watch了状态管理器的数据,于是有了这一段代码

dart 复制代码
void refreshData() async{
  //从读取数据
  final data = await readDataBase();
  //给状态管理器赋值
  state = data;
}

Future<String> readDataBase() async {
  return "假数据";
}
void main(){
  print("初始化");
  refreshData();
## }

逻辑很简单,因为是响应式的,所以数据更新了会去自动更新列表,到这里是正常的;然后又来了个需求,需要刷新完数据之后,拿到数据跳转到另一个页面,于是我鬼使神差的写下了这一段代码

dart 复制代码
void main(){
  print("初始化");
  refreshData();
  gotoNextPage('路由',state);
}

写的时候我是这样想的,refreshData调用readDataBase,这里await了,那么refreshData肯定也会阻塞在这里,等await到了结果,然后再去跳转,一切都是那么的完美,等运行的时候就来问题了,发现调用gotoNextPage的时候拿不到数据。 经过了一个小时的调试之后,最终定位到了问题,就是在refreshData函数里面,await readDataBase();这句代码其实是不会阻塞refreshData的调用方的,因为我们没有在调用refreshData时await,当我们执行await readDataBase();这句代码,当前函数会立即返回一个Future,只是这个Future没有结果,想到这就很解决这个问题了,就是在调用refreshData的时候await一下就好。

例子

csharp 复制代码
Future<void> main() async {
  print("开始程序");
  f1();
  print("结束main");
}

Future<void> f1() async {
  await Future.delayed(Duration(seconds: 3));
  print("222");
}


//结果是
开始程序
结束main
222

总结

在调用异步函数的时候需要仔细check需不需要await,以前一直觉得await会阻塞住函数,原来await其实是会立即返回一个Future对象的,如果调用方没有await这个future的结果,那么调用方还是会继续往下执行,等future结果回来了,await之后的代码才会继续执行。

相关推荐
好的佩奇3 天前
Dart 之增强枚举
android·flutter·dart
传奇开心果编程5 天前
【Flutter踩坑排雷】第7课:巨型 build 函数坑|全部 UI 写在同一个 build,维护难、隐性异常
android·flutter·ios·移动开发·跨平台·dart·声明式ui
好的佩奇6 天前
Dart 之类修饰符
android·flutter·dart
好的佩奇017 天前
Dart 之类修饰符
android·flutter·dart
传奇开心果编程9 天前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
flutter·移动开发·跨平台·dart·编程语言理论·编程框架·声明式ui
好的佩奇10 天前
Dart 之模式
android·flutter·dart
好的佩奇16 天前
Dart 之类型系统
flutter·dart
FungLeo20 天前
成为全栈·Flutter App 篇·会员中心:资料、密码、通知与私有数据缓存
flutter·dart·身份认证·数据隔离·成为全栈·会员中心
FungLeo21 天前
成为全栈·Flutter App 篇·Flutter Markdown 阅读器:支持范围与渲染边界
flutter·markdown·dart·代码高亮·成为全栈·移动阅读
好的佩奇24 天前
Dart 之库与可见性
dart