业务:接口返回速度导致数据覆盖问题。
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;
promise:这是一个经过处理的 Promise,它在原始 Promise 的基础上添加了一个检查hasCancelled变量的步骤。如果hasCancelled为true,则抛出一个包含{ isCancelled: true }的错误对象,表示该 Promise 被取消了。cancel:这是一个函数,用于将hasCancelled变量设置为true,以取消与该 Promise 相关的操作。
接下来,代码定义了一个名为 createLatest 的函数,它没有参数。该函数返回一个函数,该函数接受一个 Promise 作为参数。在 createLatest 函数内部,它会检查 cancelablePromise 变量是否存在。如果存在,则调用 cancelablePromise.cancel() 取消之前的 Promise 操作。然后,将 cancelablePromise 设置为一个新的 cancelable 对象,传入当前的 Promise。最后,返回 cancelablePromise.promise,即经过处理的 Promise。
通过这种方式,每次调用 createLatest 返回的函数时,都会取消之前的 Promise 操作,并始终只执行最新的 Promise 操作。