Question

编辑：试图澄清问题并简化它-我输入了一些代码来表明我已尝试解决此问题，但我认为这只会使事情变得混乱。

我是Promise的新手，我正在尝试将一些现有的代码（非常简单）转换为可用于promises。

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

从MDN文档中，承诺基本上是这样的

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);
            });
    });
}

如何在“ click”事件中使用Promises，而不在执行程序函数中添加事件处理程序？

2 个答案: