期约取消

本节目标：理解“期约取消”的核心思路，并能把它用于实际开发或面试表达。 一、设置超时时间，在设置的时间后，如果期约状态未冻结，调用resolve或reject函数进行冻结；

二、如果使用计时器来resolve一个期约，我们如果想提前结束期约，可以清除这个计时器；此时，可使用cancelToken，这个类返回一个实例，实例上有个promise，这个promise可以执行一些期约取消后的操作；

<!DOCTYPE html>
<html lang="en">
<body>
  <button id='start'>Start</button>
  <button id='cancel'>Cancel</button>
  <script>
    class CancelToken {
      constructor(cancelFn) {
        this.promise = new Promise((resolve, reject) => {
          cancelFn(() => {
            setTimeout(console.log, 0, 'delay cancelled');
            resolve();
          })
        })
      }
    }
    const startButton = document.querySelector('#start');
    const cancelButton = document.querySelector('#cancel');
    function cancellableDelayedResolve(delay) {
      setTimeout(console.log, 0, 'set delay');
      return new Promise((resolve, reject) => {
        const id = setTimeout(() => {
          setTimeout(console.log, 0, 'delayed resolve');
          resolve();
        }, delay);
        const cancelToken = new CancelToken((cancelCallback) =>
          cancelButton.addEventListener('click', cancelCallback)
        );
        cancelToken.promise.then(() => clearTimeout(id));
      })
    }
    startButton.addEventListener('click', () => cancellableDelayedResolve(1000));
  </script>
</body>
</html>
上面的cacelToken接受一个cancelFn，这个函数是在创建类实例时立即执行的，它的主要使用时在特定的事件发生时，调用它的参数cancelCallback函数；

这个函数cancelCallback中包装了resolve函数，cancelCallback的执行会调用Resolve函数，从而使用cancelToken实例上的promise状态凝固，我们便在实例promise的then方法中添加回调函数，比如清除计时器；

三、请求发出后的取消和超时处理；