Dart 中是否有相当于 Javascript 的 `resolve` 函数（来自 Promise 构造函数）？答案

【问题标题】：Is there an equivalent of Javascript's `resolve` function (from the Promise constructor) in Dart?Dart 中是否有相当于 Javascript 的 `resolve` 函数（来自 Promise 构造函数）？
【发布时间】：2021-10-06 23:24:53
【问题描述】：

我想创建一个返回未来的函数。值将在特定时间解析。但是，必须从回调内部解析该值。在 Javascript 中，我可以这样做：

function delay(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, seconds * 1000);
  });
}

我在 Dart 中没有看到任何明确的解决方案，谁能告诉我一种方法来做到这一点（或解决这个问题的方法）？如果您需要任何说明，请随时提出评论。

编辑：为了更清楚，我将提供我创建的上下文和源代码。

我正在尝试创建一个在元素发生单个事件后返回的函数（实际上是方法）。我首先是用 Javascript 编写的 -

HTMLElement.prototype.on = function(eventName) {
    return new Promise(function(resolve, reject) {
        var handler = function(event) {
            resolve(null);
            this.removeEventListener(eventName, handler);
        };
        this.addEventListener(eventName, handler);
    });
};

你可以像这样使用它：await myButton.on("click"); alert("Button clicked first time");。

为了玩弄，我正在尝试在 Dart + HTML 中重新创建它，这是目前的代码。

import "dart:html";

extension on HtmlElement {
  on(String name) {
    void handler(Event event) {
      removeEventListener(name, handler);
      // Do something to actually return from the method...
    }

    addEventListener(name, handler);
  }
}

void main() {}

编辑：如果好奇，可以在here 或here 找到完整代码。

【问题讨论】：

你能告诉我们你尝试了什么/你的飞镖代码是什么样的吗？
@Samathingamajig 当然。
@Samathingamajig 完成。

标签： javascript dart asynchronous dom promise

【解决方案1】：

我不熟悉 JavaScript Promises，但假设您希望 await myButton.on("click") 仅在 handler 函数至少执行一次后完成，您可以使用 Completer：

import "dart:async";
import "dart:html";

extension on HtmlElement {
  Future<void> on(String name) {
    final completer = Completer<void>();

    void handler(Event event) {
      removeEventListener(name, handler);
      completer.complete();
    }

    addEventListener(name, handler);
    return completer.future;
  }
}

【讨论】：

非常感谢！我知道我的问题措辞很糟糕，所以感谢您努力阅读并做出好的回答。现在我知道了 Completer 类和我的小问题的答案。

【解决方案2】：

Promise 最多可以解决一次次，因此在第一次单击后自动删除事件侦听器可能是有意义的。并且不要修改不卫生的做法HtmlElement.prototype，而是编写一个简单的onclick 函数，该函数接受 HtmlElement 作为输入 -

function onclick(elem) {
  return new Promise(r =>
    elem.addEventListener("click", r, {once: true})
  )
}

function main () {
  onclick(document.forms.myapp.mybutton)
    .then(event => console.log(event.target))
    
  onclick(document.forms.myapp.otherbutton)
    .then(event => console.log(event.target))
}

main()

<form id="myapp">
  <button type="button" name="mybutton">A</button>
  <button type="button" name="otherbutton">B</button>
</form>

【讨论】：