如何在Flutter 3.3.0+中用dart:js_interop定义Dart的JSPromise函数？

首先要确保你导入了Dart JS互操作的核心库：

import 'dart:js_interop';

步骤1：定义JS对象的互操作类型 #

你需要先把JavaScript中的MyObject定义为Dart的互操作类型，否则JSPromise<MyObject>无法正确关联到JS对象：

@JS()
extension type MyObject._(JSObject _) implements Object {
  // 根据JS中MyObject的实际构造函数和属性/方法定义external成员
  external MyObject();
  external String get exampleProperty; // 示例：对应JS对象的属性
}

步骤2：修正MyClass的Promise相关定义 #

根据JavaScript中MyClass的实际逻辑，分两种情况处理：

情况A：JS类有一个返回Promise的异步方法

如果myObjectAsync是JS类的方法（而非setter），用于返回Promise<MyObject>，正确的定义方式是：

@JS("MyClass")
extension type MyClass._(JSObject _) implements Object {
  external MyClass();
  external set myObject(JSFunction args);
  // 定义返回JSPromise的异步方法
  external JSPromise<MyObject> myObjectAsync();
}

在Dart中调用时，可以通过toFuture()把JS Promise转为Dart Future：

void main() async {
  final instance = MyClass();
  // 等待Promise完成，获取MyObject实例
  MyObject result = await instance.myObjectAsync().toFuture();
  print(result.exampleProperty);
}

情况B：JS类有接收Promise的setter

如果myObjectAsync是JS类的setter，用于接收Promise<MyObject>类型的值，你的原定义基本正确，但要确保MyObject是已定义的互操作类型：

@JS("MyClass")
extension type MyClass._(JSObject _) implements Object {
  external MyClass();
  external set myObject(JSFunction args);
  // 接收JSPromise<MyObject>的setter
  external set myObjectAsync(JSPromise<MyObject> args);
}

关键注意事项 #

• 不要混用普通Dart对象和JS互操作对象，所有关联JS的类型都需要用extension type或@JS注解定义
• 如果需要将Dart函数传入JS并返回Promise，可使用allowInterop包裹返回JSPromise的Dart函数：

  final jsFunc = allowInterop(() => JSPromise.resolve(MyObject()));
  instance.myObject = jsFunc;
  

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