Promise：为什么没有取消？
共 5067字，需浏览 11分钟
·
2024-06-24 08:00
在JavaScript中，Promise是用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。然而，JavaScript的Promise并不提供内置的取消（cancel）机制。
Promise是经过了深思熟虑，才不自带取消功能的！！！
这篇文章，将围绕着设计的哲学，以及从状态机的角度，解释为什么不需要cancel。
即使如此，文章最后部分，还是会提供一些方法，来实现一下cancle。
设计的哲学
设计理念
-
Promise的设计初衷是为了简化回调函数的使用，使得处理异步操作的代码更加简洁和可读。其设计重点在于处理异步操作的成功和失败，而不是控制操作的生命周期。 -
取消机制会引入复杂性，尤其是对于依赖于多个Promise的情况，例如Promise.all或Promise.race。如果某个Promise被取消，其影响可能会传递给其他依赖于它的Promise，导致意外的行为和难以调试的问题。
资源管理
-
异步操作通常涉及到外部资源，如网络请求、定时器等。Promise取消机制需要能够正确管理和释放这些资源。实现一个通用且可靠的资源管理机制非常复杂，并且可能因不同的资源类型而异。
取消语义不明确
-
如果一个Promise可以被取消，那么需要明确如何处理其已完成的状态。特别是，处理已经部分完成或即将完成的操作，可能会导致不一致的状态。
状态机：简单就是美
Promise的状态机
在输入一个状态时，只得到一个固定的状态。
一个Promise可以被看作是一个简单的状态机，它有以下几种状态：
-
Pending（进行中） ：初始状态，表示异步操作尚未完成。 -
Fulfilled（已完成） ：表示异步操作成功完成，并返回了一个值。 -
Rejected（已拒绝） ：表示异步操作失败，并返回了一个原因（错误）。
状态转换规则如下：
-
从Pending状态可以转换到Fulfilled状态。 -
从Pending状态可以转换到Rejected状态。 -
一旦转换到Fulfilled或Rejected状态，Promise的状态就不可再改变。
取消功能的复杂性
引入取消功能意味着需要增加一个新的状态——“Cancelled（已取消）”。这会使状态机的设计变得更加复杂，因为需要考虑更多的状态转换和边界情况。
如果我们引入“Cancelled”状态，状态机的状态和转换规则将变成：
-
Pending（进行中） ：
-
-
可以转换到Fulfilled。 -
可以转换到Rejected。 -
可以转换到Cancelled。
-
Fulfilled（已完成） ：状态不可变。 -
Rejected（已拒绝） ：状态不可变。 -
Cancelled（已取消） ：状态不可变。
这种增加的复杂性会导致以下问题：
-
状态转换冲突：需要明确地处理在Pending状态下多次转换的情况。例如，如果一个Promise在Pending状态下同时尝试转换到Fulfilled和Cancelled，应该优先处理哪一个？ -
副作用处理：许多异步操作（如网络请求、文件读写等）具有副作用。取消这些操作需要确保所有相关的资源都被正确地清理，这不仅增加了实现的复杂性，还可能导致不一致的状态。 -
链式操作：Promise通常被链式调用（ .then().catch() ）。如果一个中间的Promise被取消，如何处理后续链式操作也是一个难题。例如，Promise.all或Promise.race的行为如何改变？
如何实现取消功能
尽管标准的Promise没有内置的取消功能，可以通过一些方法来实现类似的功能。例如，使用AbortController来取消网络请求，或者使用自定义的Promise包装器来支持取消。
使用AbortController
对于Fetch API，可以使用AbortController来取消请求：
const controller = new AbortController();
const signal = controller.signal;
fetch('https://www.baidu.com', { signal })
.then(response => response)
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', err);
}
});
// 取消请求
controller.abort();
自定义Promise包装器
也可以创建一个支持取消的自定义Promise包装器：
class CancellablePromise {
constructor(executor) {
this._hasCanceled = false;
this._promise = new Promise((resolve, reject) => {
executor(
value => this._hasCanceled ? reject({ canceled: true }) : resolve(value),
reason => this._hasCanceled ? reject({ canceled: true }) : reject(reason)
);
});
}
cancel() {
this._hasCanceled = true;
}
then(onFulfilled, onRejected) {
return this._promise.then(onFulfilled, onRejected);
}
catch(onRejected) {
return this._promise.catch(onRejected);
}
}
// 使用自定义的CancellablePromise
const cancellablePromise = new CancellablePromise((resolve, reject) => {
setTimeout(() => resolve('Completed!'), 1000);
});
cancellablePromise.then(
result => console.log(result),
err => {
if (err.canceled) {
console.log('Promise was canceled');
} else {
console.error('Promise error:', err);
}
}
);
// 取消Promise
cancellablePromise.cancel();
虽然标准的Promise没有内置取消功能，但可以通过这些方法来实现取消逻辑，根据实际需求选择合适的方案。
结语
虽然JavaScript的Promise没有内置取消功能，但这并不意味着我们无法实现取消功能。通过理解Promise的设计哲学和状态机模型，我们可以更好地掌握其使用方法，并通过巧妙的编程技巧实现我们需要的功能
本文转载于稀土掘金技术社区——德玛西亚大宝剑之力
原文：https://juejin.cn/post/7373986431850872869
“分享、点赞、在看” 支持一下