JavaScript await调用Dart异步函数异常/不等待问题求助

问题根因 #

你对问题的猜测完全正确，Dart 原生的 Future 类型和 JavaScript 原生的 Promise 类型并不互通，JS 侧的 await 无法直接识别 Dart 返回的 Future 对象，才会出现开发模式抛异常、生产模式不等待执行完成的不一致问题。

解决方案 #

你需要使用 Dart 标准库 dart:js_util 提供的 futureToPromise 方法，将 Dart 侧的异步返回值转换为 JS 可识别的原生 Promise 后再返回给 JS 调用方。

具体修改步骤 #

1. 在 main.dart 头部新增导入：

import 'dart:js_util';

2. 修改 connect 函数的实现，把要返回的 Future 用 futureToPromise 包裹后返回：

// 注意函数返回值改为dynamic，因为最终返回的是JS侧的Promise对象
dynamic connect(String host) {
  print('main: before connect');
  var completer = Completer<dynamic>();

  Future.delayed(Duration(seconds:2), () {
      print('main: connect done after 2s');
      completer.complete('Future: Connect complete');
  });

  // 核心修改：将Dart Future转为JS Promise再返回
  return futureToPromise(completer.future);
}

验证效果 #

修改完成后重新运行：

• webdev serve 开发模式下不会再抛出类型异常，JS 侧 await 可以正常拿到返回值
• webdev build 生产构建后运行，JS 侧 await 也会正常等待异步执行完成再执行后续逻辑

补充说明 #

promiseToFuture 和 futureToPromise 都是 dart:js_util 库提供的互操作工具：

• futureToPromise 用于 JS 调用 Dart 异步方法的场景，把 Dart Future 转成 JS Promise
• promiseToFuture 用于 Dart 调用 JS 异步方法的场景，把 JS Promise 转成 Dart Future
  由于官方文档重点覆盖 Dart 调用 JS 的场景，反向场景的说明确实较少，才会导致很难找到对应的解决方案。

内容的提问来源于stack exchange，提问作者zapappa