面试官：能不能给 Promise 增加取消功能和进度通知功能... 我：？

问题：点击一个 button，触发一次这个函数，但是既没有走成功回调，也没有走失败回调。问下一次点击，类似取消上次 promise 的操作，但没有这种方法，怎么去做。我又说了提供变量控制，这个可以，还有就说不出来了。面试官说可以包装 promise，写一个类，提供一个 cancel 方法，类似这种，主要是不想拿到期望的 promise 值。

原面经链接：美团暑期一面_牛客网 (nowcoder.com)

取消功能

我们都知道 Promise 的状态是不可逆的，也就是说只能从 pending -> fulfilled 或 pending -> rejected，这一点是毋庸置疑的。但现在可能会有这样的需求，在状态转换过程当中我们可能不再想让它进行下去了，也就是说让它永远停留至 pending 状态。奇怪了，想要一直停留在 pending，那我不调用 resolve 和 reject 不就行了 🤔

1const p = new Promise((resolve, reject) => {
2  setTimeout(() => {
3    // handler data, no resolve and reject
4  }, 1000);
5});
6console.log(p); // Promise {<pending>} 💡

但注意我们的需求条件，是 在状态转换过程中 ，也就是说必须有调用 resolve 和 reject，只不过中间可能由于某种条件，阻止了这两个调用。其实这个场景和超时中断有点类似但还是不太一样，我们先利用 Promise.race 来看看：模拟一个发送请求，如果超时则提示超时错误：

1const getData = () =>
2  new Promise((resolve) => {
3    setTimeout(() => {
4      console.log("发送网络请求获取数据"); // ❗
5      resolve("success get Data");
6    }, 2500);
7  });
8
9const timer = () =>
10  new Promise((_, reject) => {
11    setTimeout(() => {
12      reject("timeout");
13    }, 2000);
14  });
15
16const p = Promise.race([getData(), timer()])
17  .then((res) => {
18    console.log("获取数据:", res);
19  })
20  .catch((err) => {
21    console.log("超时: ", err);
22  });

问题是现在确实能够确认超时了，但 race 的本质是内部会遍历传入的 promise 数组对它们的结果进行判断，那好像并没有实现网络请求的中断哎 🤔，即使超时网络请求还会发出。

而我们想要实现的取消功能是希望不借助 race 等其他方法并且不发送请求。比如让用户进行控制，一个按钮用来表示发送请求，一个按钮表示取消，来中断 promise 的流程：当然这里我们不讨论关于请求的取消操作，重点在 Promise 上

其实按照我们的理解只用 Promise 是不可能实现这样的效果的，因为从一开始接触 Promise 就知道一旦调用了 resolve/reject 就代表着要进行状态转换。不过取消这两个字相信一定不会陌生， clearTimeout 、 clearInterval 嘛。

OK，如果你想到了这一点这个功能就出来了，我们直接先来看红宝书上给出的答案：

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7  </head>
8  <body>
9    <button id="send">Send</button>
10    <button id="cancel">Cancel</button>
11
12    <script>
13      class CancelToken {
14        constructor(cancelFn) {
15          this.promise = new Promise((resolve, reject) => {
16            cancelFn(() => {
17              console.log("delay cancelled");
18              resolve();
19            });
20          });
21        }
22      }
23      const sendButton = document.querySelector("#send");
24      const cancelButton = document.querySelector("#cancel");
25
26      function cancellableDelayedResolve(delay) {
27        console.log("prepare send request");
28        return new Promise((resolve, reject) => {
29          const id = setTimeout(() => {
30            console.log("ajax get data");
31            resolve();
32          }, delay);
33
34          const cancelToken = new CancelToken((cancelCallback) =>
35            cancelButton.addEventListener("click", cancelCallback)
36          );
37          cancelToken.promise.then(() => clearTimeout(id));
38        });
39      }
40      sendButton.addEventListener("click", () =>
41        cancellableDelayedResolve(1000)
42      );
43    </script>
44  </body>
45</html>

这段代码说实话是有一点绕的，而且个人觉得是有多余的地方，我们一点一点来看：

首先针对于 sendButton 的事件处理函数，这里传入了一个 delay，可以把它理解为取消功能期限，超过期限就要真的发送请求了。我们看该处理函数内部返回了一个 Promise，而 Promise 的 executor 中首先开启了定时器，并且实例化了一个 CancelToken，而在 CancelToken 中才给 cancelButton 添加点击事件。

这里的 CancelToken 就是我觉得最奇怪的地方，可能没有体会到这个封装的技巧。它的内部创建了一个 Promise，绕了一圈后相当于 cancelButton 的点击处理函数是调用这个 Promise 的 resolve，最终是在其 pending -> fuilfilled，即 then 方法里才去取消定时器，那为什么不直接在事件处理函数中取消呢？难道是为了不影响主执行栈的执行所以才将其推到微任务处理 🤔？

介于自己没理解，我就按照自己的思路封装个不一样的 🤣：

1const sendButton = document.querySelector("#send");
2const cancelButton = document.querySelector("#cancel");
3
4class CancelPromise {
5  // delay: 取消功能期限  request：获取数据请求(必须返回 promise)
6  constructor(delay, request) {
7    this.req = request;
8    this.delay = delay;
9    this.timer = null;
10  }
11
12  delayResolve() {
13    return new Promise((resolve, reject) => {
14      console.log("prepare request");
15      this.timer = setTimeout(() => {
16        console.log("send request");
17        this.timer = null;
18        this.req().then(
19          (res) => resolve(res),
20          (err) => reject(err)
21        );
22      }, this.delay);
23    });
24  }
25
26  cancelResolve() {
27    console.log("cancel promise");
28    this.timer && clearTimeout(this.timer);
29  }
30}
31
32// 模拟网络请求
33function getData() {
34  return new Promise((resolve) => {
35    setTimeout(() => {
36      resolve("this is data");
37    }, 2000);
38  });
39}
40
41const cp = new CancelPromise(1000, getData);
42
43sendButton.addEventListener("click", () =>
44  cp.delayResolve().then((res) => {
45    console.log("拿到数据：", res);
46  })
47);
48cancelButton.addEventListener("click", () => cp.cancelResolve());

进度通知功能

进度通知？那不就是类似发布订阅嘛？还真是，我们来看红宝书针对这块的描述：

执行中的 Promise 可能会有不少离散的“阶段”，在最终解决之前必须依次经过。某些情况下，监控 Promise 的执行进度会很有用

这个需求就比较明确了，我们直接来看红宝书的实现吧，核心思想就是扩展之前的 Promise，为其添加 notify 方法作为监听，并且在 executor 中增加额外的参数来让用户进行通知操作：

1class TrackablePromise extends Promise {
2  constructor(executor) {
3    const notifyHandlers = [];
4    super((resolve, reject) => {
5      return executor(resolve, reject, (status) => {
6        notifyHandlers.map((handler) => handler(status));
7      });
8    });
9    this.notifyHandlers = notifyHandlers;
10  }
11  notify(notifyHandler) {
12    this.notifyHandlers.push(notifyHandler);
13    return this;
14  }
15}
16let p = new TrackablePromise((resolve, reject, notify) => {
17  function countdown(x) {
18    if (x > 0) {
19      notify(`${20 * x}% remaining`);
20      setTimeout(() => countdown(x - 1), 1000);
21    } else {
22      resolve();
23    }
24  }
25  countdown(5);
26});
27
28p.notify((x) => setTimeout(console.log, 0, "progress:", x));
29p.then(() => setTimeout(console.log, 0, "completed"));

emm 就是这个例子总感觉不太好，为了演示这种效果还用了递归，大伙们觉得呢？

不好就自己再写一个 🤣！不过这次的实现就没有多大问题了，基本功能都具备也没有什么阅读障碍，我们再添加一个稍微带点实际场景的例子吧：

1// 模拟数据请求
2function getData(timer, value) {
3  return new Promise((resolve) => {
4    setTimeout(() => {
5      resolve(value);
6    }, timer);
7  });
8}
9
10let p = new TrackablePromise(async (resolve, reject, notify) => {
11  try {
12    const res1 = await getData1();
13    notify("已获取到一阶段数据");
14    const res2 = await getData2();
15    notify("已获取到二阶段数据");
16    const res3 = await getData3();
17    notify("已获取到三阶段数据");
18    resolve([res1, res2, res3]);
19  } catch (error) {
20    notify("出错！");
21    reject(error);
22  }
23});
24
25p.notify((x) => console.log(x));
26p.then((res) => console.log("Get All Data:", res));

End

关于取消功能在红宝书上 TC39 委员会也曾准备增加这个特性，但相关提案最终被撤回了。结果 ES6 Promise 被认为是“激进的”：只要 Promise 的逻辑开始执行，就没有办法阻止它执行到完成。

实际上我们学了这么久的 Promise 也默认了这一点，因此这个取消功能反而就不太符合常理，而且十分鸡肋。比如说我们有使用 then 回调接收数据，但因为你点击了取消按钮造成 then 回调不执行，我们知道 Promise 支持链式调用，那如果还有后续操作都将会被中断，这种中断行为 debug 时也十分痛苦，更何况最麻烦的一点是你还需要传入一个 delay 来表示取消的期限，而这个期限到底要设置多少才合适呢...

模拟题一

模拟题二

模拟题三

模拟题四

面试官：能不能给 Promise 增加取消功能和进度通知功能... 我：？

取消功能

进度通知功能

End

面试官：能不能给 Promise 增加取消功能和进度通知功能... 我：？#

取消功能#

进度通知功能#

End#

面试官：能不能给 Promise 增加取消功能和进度通知功能... 我：？

取消功能

进度通知功能

End