关于promise:取消一个promise

41次阅读

共计 957 个字符，预计需要花费 3 分钟才能阅读完成。

场景：
发送多个申请后，当回来的数据要渲染到页面时，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() 渲染数据

正文完