给你一个可以中断的Promise

Promise.race()

我们在《处理重复请求》一文中介绍过如何通过axios cancelToken结合axios 中间件来中断axios请求。但这种方法只适用于axios Promise，今天我们来了解一种更加通用的中断Promise请求的方法。

在日常开发当中，我们免不了会使用到Promise。但我们都知道，Promise有个一旦创建就无法取消的缺点，那么我们今天就来谈谈怎么去中断正在执行的Promise。

这里我们说的是中断而不是终止，Promise本质上是无法被终止的。

以下是MDN对Promise.race方法的介绍：

Promise.race(iterable)方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

也就是说，通过Promise.race，我们能够达到当传入的Promise数组中的任意一个Promise达到了解决或拒绝时，就无视Promise数组中的其他Promise的结果的目的。

封装cancellablePromiseFactory

我们可以利用Promise.race的特写，实现一个能返回拥有一个用于中断Promise请求的abort方法的Promise实例。

interface CancellablePromiseFactory<T = unknown> extends Promise<T> {
  abort?: (reasonToAbort: any) => void;
}

function cancellablePromiseFactory(executor) {
  //用于中断Promise的方法
  let abort;
  //构造一个原始的Promise实例
  const originPromise = new Promise(executor);
  //构造一个专门用来中断的Promise实例
  const promiseToAbort = new Promise(
    //将promiseToAbort的reject赋值给abort
    (_, reject) => (abort = reasonToAbort => reject(reasonToAbort)),
  );

  //使用originPromise和promiseToAbort构造一个Promise Array，并使用Promise.race构造cancellablePromise
  const cancellablePromise: CancellablePromiseFactory = Promise.race([
    originPromise,
    promiseToAbort,
  ]);

  //将abort方法挂载到cancellablePromise上
  cancellablePromise.abort = abort;

  return cancellablePromise;
}

我们来测试一下：

我们可以看到，cancellablePromiseFactory构造的cancellablePromise在调用abort方法后就被中断了。

但注意，这是只是中断掉了Promise的调用链，但前面我们说过，Promise一旦创建就无法取消，请求是依然可达的。

我们可以看到，cancellablePromiseFactory构造的cancellablePromise在调用abort方法后就被中断了。

但注意，这是只是中断掉了Promise的调用链，但前面我们说过，Promise一旦创建就无法取消，请求是依然可达的。

但我们可以利用cancellablePromiseFactory做很多事情，如设置请求的超时时间：

相关资料