关于promise:取消一个promise

场景：
发送多个申请后，当回来的数据要渲染到页面时，DOM元素被销毁了,此时如果要渲染就会报错
比方 react 在 useEffect 中申请的数据时，组件销毁

useEffect(() => {    let dataPromise = new Promise(...);    let data = dataPromise().then();    // TODO 接下来解决 data，此时本组件可能曾经销毁了，dom 也不存在了，所以须要在上面对 Promise 进行中断        return (() => {      // TODO 组件销毁时，对 dataPromise 进行中断或勾销    }) });

能够对生成的 Promise 对象进行再一次包装，返回一个新的 Promise 对象，而新的对象上被咱们减少了 cancel 办法，用于勾销。这里的原理就是在 cancel 办法外面去阻止 Promise 对象执行 then()办法。

function getPromiseWithCancel(originPromise) {  let cancel = (v) => {};  let isCancel = false;  const cancelPromise = new Promise(function (resolve, reject) {    cancel = e => {      isCancel = true;      reject(e);    };  });  const groupPromise = Promise.race([originPromise, cancelPromise])  .catch(e => {    if (isCancel) {      // 被动勾销时，不触发外层的 catch      return new Promise(() => {});    } else {      return Promise.reject(e);    }  });  return Object.assign(groupPromise, { cancel });}// 应用如下const originPromise = axios.get(url);const promiseWithCancel = getPromiseWithCancel(originPromise);promiseWithCancel.then((data) => {  console.log('渲染数据', data);});promiseWithCancel.cancel(); // 勾销 Promise，将不会再进入 then() 渲染数据