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之后的代码才会继续执行。

相关推荐
哈撒Ki21 小时前
快速入门 Dart 语言
前端·flutter·dart
天渺工作室4 天前
Flutter 版的 NVM——FVM 使用指南
flutter·dart
Nathan202406165 天前
Flutter - InheritedWidget
flutter·dart
空中海7 天前
2.3 组件复用与组合
flutter·dart
空中海9 天前
3.3 第三方框架
flutter·dart
空中海11 天前
2.7 列表与滚动性能优化
flutter·性能优化·dart
空中海11 天前
2.4 绘制与动画
flutter·dart
空中海11 天前
2.6 表单与输入处理
flutter·dart
空中海11 天前
1.1 Flutter 简介与架构原理
flutter·dart
空中海11 天前
1.3 Dart 核心语言特性
flutter·dart