如何在没有在执行程序函数中添加事件处理程序的情况下将 Promise 与“click”事件一起使用？

Question

编辑：试图澄清问题并缩短它——我输入了一些代码来表明我曾试图解决这个问题，但我认为它只会让事情变得混乱。

我是 Promise 新手，我正在尝试转换一些现有代码（这很简单）以使用 Promise。

我想使用 promise 将按钮点击链接到我程序的其他部分，也就是说，我想将点击视为异步事件（例如，类似于 ajax 调用）。 如何做到这一点？

从 MDN 文档中，promise 基本上是这样工作的

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

我完全理解这一点。 据我了解，以下内容会起作用

function myPromiseGenerator() {
  return new Promise((resolve, reject) => {
   this.myButton.addEventListener('click',function(e) {
    /// do something to process the answer
    resolve(something);
    }
  });
}

但是如何删除事件侦听器？ 我只想添加一次事件侦听器，而不是在每次调用myPromiseGenerator但我不知道如何使其工作。

一般来说，做我想做的事情的最佳方法是什么？ 谢谢你的帮助。

Answer 1

只需使用事件侦听器的once选项：

function myPromiseGenerator() {
  return new Promise((resolve, reject) => {
    this.myButton.addEventListener('click',function(e) {
        /// do something to process the answer
        resolve(something);
    }, {once: true});
  });
}

Answer 2

你可以做你最初打算做的 - 删除事件监听器 - 如果你给匿名处理函数一个名字：

async function myPromiseGenerator() {
    return new Promise(resolve => {
        this.myButton.addEventListener('click',
            async function handler(event) {
                this.myButton.removeEventListener('click', handler);
                // Assume a login code has been entered - validate it
                if (await validateAccessCode())
                    resolve(true)
                else
                    resolve(false);
            });
    });
}