处理 JavaScript 中被遗忘的 promise

Question

这里有一个例子，希望能更容易理解这个问题。

var listen = document.querySelector("#listen"),
  cancel = document.querySelector("#cancel"),
  submit = document.querySelector("#submit");

var promiseResolve = null;

listen.addEventListener("click", startListening);
cancel.addEventListener("click", abort);
submit.addEventListener("click", onSubmitClick);
submit.disabled = true;

function startListening() {
  submit.disabled = false;
  listen.disabled = true;
  new Promise(function(resolve) {
    promiseResolve = resolve;
  }).then(onSubmit);
}

function abort() {
  listen.disabled = false;
  submit.disabled = true;
  promiseResolve = null;
}

function onSubmitClick() {
  if (promiseResolve) promiseResolve();
}

function onSubmit() {
  console.log("Done");
  abort();
}

<button id="listen">Listen</button>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>

在上面的脚本中，有一个动作 (listen) 将在 Promise 的帮助下启用另一个动作 (submit)。但是可以使用cancel 操作取消该流程，将大部分代码返回到其原始状态。 cancel 操作仅将 Promise 的 resolve 的引用设置为 null，这意味着承诺将永远处于不确定状态，因为它永远不会被解决或拒绝。所以这些是我的问题：

• 这种方法正确吗？
• 是否会多次执行此操作，占用同样大量的资源？
• 我是否还应该保留对拒绝函数的引用并在cancel 操作中调用它？

我知道在上面的例子中，同样的结果可以通过 使用boolean 标志检查是否已按下监听按钮 在提交之前，但就像我说的这只是一个例子，所以我 可以更容易地解释问题。

Answer 1

如this回答中提到的；

大多数使用 Promise 的代码都希望它们在某些时候解决或拒绝 指向未来（这就是首先使用承诺的原因）。 如果他们不这样做，那么该代码通常永远无法完成其工作。

您可能有一些其他代码来完成 为那项任务而努力，而承诺却被放弃了 做它的事。如果你这样做，Javascript中没有内部问题 就是这样，但这不是 promise 的设计方式，而是 通常不是承诺的消费者期望它们如何工作。

未能解决或拒绝承诺不会导致 Javascript 出现问题，但无论如何这是一种不好的做法。如果它永远不会解决，您的应用程序无法确定 Promise 发生了什么。与其让 Promise 陷入困境，不如返回一个类似错误消息的值，并让 Promise 过滤错误消息的结果。如果发现错误，则拒绝（）该承诺，以便应用程序可以确定下一步。

var listen = document.querySelector("#listen"),
  cancel = document.querySelector("#cancel"),
  submit = document.querySelector("#submit");

var promiseResolve = null;

listen.addEventListener("click", startListening);
cancel.addEventListener("click", onCancelClick);
submit.addEventListener("click", onSubmitClick);
submit.disabled = true;

function startListening() {
  submit.disabled = false;
  listen.disabled = true;
  new Promise(function(resolve, reject) {
    promiseResolve = (error) => {
       if (error) { reject(error); } else { resolve(); }
    };
  }).then(onSubmit)
  .catch(error => onError(error));
}

function abort() {
  listen.disabled = false;
  submit.disabled = true;
  promiseResolve = null;
}

function onSubmitClick() {
  if (promiseResolve) promiseResolve();
}

function onCancelClick() {
  if (promiseResolve) promiseResolve("Cancelled!");
}

function onSubmit() {
  console.log("Done");
  abort();
}

function onError(error) {
  console.warn(error);
  abort();
}

<button id="listen">Listen</button>
<button id="submit">Submit</button>
<button id="cancel">Cancel</button>