Promise解决接口数据覆盖问题

406 阅读1分钟

业务:接口返回速度导致数据覆盖问题。

const cancelable = promise => {
  let hasCancelled = false;

  return {
    promise: promise.then(v => {
      if (hasCancelled) {
        throw { isCancelled: true };
      }

      return v;
    }),
  
    cancel: () => (hasCancelled = true)
  };
};

const createLatest = () => {
  let cancelablePromise: any = null;

  return promise => {
    if (cancelablePromise) {
      cancelablePromise.cancel();
      cancelablePromise = cancelable(promise);
    } else {
      cancelablePromise = cancelable(promise);
    }

    return cancelablePromise.promise;
  };
};

export default createLatest;

  1. promise:这是一个经过处理的 Promise,它在原始 Promise 的基础上添加了一个检查 hasCancelled 变量的步骤。如果 hasCancelledtrue,则抛出一个包含 { isCancelled: true } 的错误对象,表示该 Promise 被取消了。
  2. cancel:这是一个函数,用于将 hasCancelled 变量设置为 true,以取消与该 Promise 相关的操作。

接下来,代码定义了一个名为 createLatest 的函数,它没有参数。该函数返回一个函数,该函数接受一个 Promise 作为参数。在 createLatest 函数内部,它会检查 cancelablePromise 变量是否存在。如果存在,则调用 cancelablePromise.cancel() 取消之前的 Promise 操作。然后,将 cancelablePromise 设置为一个新的 cancelable 对象,传入当前的 Promise。最后,返回 cancelablePromise.promise,即经过处理的 Promise。

通过这种方式,每次调用 createLatest 返回的函数时,都会取消之前的 Promise 操作,并始终只执行最新的 Promise 操作。