掌握 JavaScript 中的承诺取消
作者：rosario de chiara✏️
在 javascript 中，promises 是处理异步操作的强大工具，在 ui 相关事件中特别有用。它们代表的值可能无法立即获得，但会在未来某个时刻得到解决。
promise 允许（或应该允许）开发人员在处理 api 调用、用户交互或动画等任务时编写更清晰、更易于管理的代码。通过使用 .then()、.catch() 和 .finally() 等方法，promises 能够以更直观的方式处理成功和错误场景，避免臭名昭著的“回调地狱”。
在本文中，我们将使用新的（2024 年 3 月）promise.withresolvers() 方法，该方法允许您通过返回一个包含三件事的对象来编写更干净、更简单的代码：一个新的 promise 和两个函数，一个用于解析 promise另一个拒绝它，因为这是最近的更新，您将需要最新的 node 运行时 (v>22) 来执行本文中的示例。
比较新旧 javascript promise 方法
在以下两个功能等效的代码块中，我们可以比较旧方法和分配方法来解析或拒绝 promise 的新方法：
let resolve, reject; const promise = new promise((res, rej) => { resolve = res; reject = rej; }); math.random() > 0.5 ? resolve("ok") : reject("not ok");
在上面的代码中，你可以看到 promise 最传统的用法：实例化一个新的 promise 对象，然后在构造函数中，你必须分配resolve和reject这两个函数，这两个函数将在以下情况下被调用：需要。
在下面的代码片段中，相同的代码块已使用新的 promise.withresolvers() 方法重写，并且看起来更简单：
const { promise, resolve, reject } = promise.withresolvers();
math.random() > 0.5 ? resolve("ok") : reject("not ok");
在这里您可以看到新方法的工作原理。它返回 promise，您可以在该 promise 上调用 .then() 方法和两个函数：resolve 和reject。
传统的 promise 方法将创建和事件处理逻辑封装在单个函数中，如果多个条件或代码的不同部分需要解析或拒绝 promise，这可能会受到限制。
相比之下，promise.withresolvers() 通过将 promise 的创建与解析逻辑分离，提供了更大的灵活性，使其适合管理复杂的条件或多个事件。然而，对于简单的用例，传统方法对于那些习惯标准承诺模式的人来说可能更简单、更熟悉。
真实示例：调用 api
我们现在可以在更现实的示例上测试新方法。在下面的代码中，您可以看到一个 api 调用的简单示例：
function fetchdata(url) {
return new promise((resolve, reject) => {
fetch(url)
.then(response => {
// check if the response is okay (status 200-299)
if (response.ok) {
return response.json(); // parse json if response is okay
} else {
// reject the promise if the response is not okay
reject(new error('api invocation failed'));
}
})
.then(data => {
// resolve the promise with the data
resolve(data);
})
.catch(error => {
// catch and reject the promise if there is a network error
reject(error);
});
});
}
// example usage
const apiurl = '<add here you api endpoint>';
fetchdata(apiurl)
.then(data => {
// handle the resolved data
console.log('data received:', data);
})
.catch(error => {
// handle any errors that occurred
console.error('error occurred:', error);
});
</add>
fetchdata 函数旨在获取 url 并返回 promise，该 promise 使用 fetch api 处理 api 调用。它通过检查响应状态是否在 200-299 范围内（表示成功）来处理响应。
如果成功，响应将被解析为 json，并且 promise 将使用结果数据进行解析。如果响应不成功，则 promise 会被拒绝，并显示相应的错误消息。此外，该函数还包括错误处理以捕获任何网络错误，如果发生此类错误则拒绝 promise。
该示例演示了如何使用此函数，展示了如何使用 .then() 块管理已解析的数据并使用 .catch() 块处理错误，确保成功的数据检索和错误得到适当的管理。
在下面的代码中，我们使用新的 promise.withresolvers() 方法重写了 fetchdata() 函数：
function fetchdata(url) {
const { promise, resolve, reject } = promise.withresolvers();
fetch(url)
.then(response => {
// check if the response is okay (status 200-299)
if (response.ok) {
return response.json(); // parse json if response is okay
} else {
// reject the promise if the response is not okay
reject(new error('api invocation failed'));
}
})
.then(data => {
// resolve the promise with the data
resolve(data);
})
.catch(error => {
// catch and reject the promise if there is a network error
reject(error);
});
return promise;
}
如您所见，上面的代码更具可读性，并且 promise 对象的作用很明确：fetchdata 函数将返回一个将成功解析或将失败的 promise，在每种情况下调用正确的方法。您可以在名为 api.inspiration.{old|new}.js.
的存储库中找到上面的代码承诺取消
以下代码探讨了如何实现 promise 取消方法。如您所知，您无法取消 javascript 中的 promise。 promise 代表异步操作的结果，它们被设计为一旦创建就解决或拒绝，没有内置机制来取消它们。
出现这个限制是因为 promise 有定义的状态转换过程；它们一开始处于待定状态，一旦解决，就无法更改状态。它们旨在封装操作的结果，而不是控制操作本身，这意味着它们不能影响或取消底层过程。这种设计选择使 promise 保持简单，并专注于表示操作的最终结果：
const cancellablepromise = () => {
const { promise, resolve, reject } = promise.withresolvers();
promise.cancel = () => {
reject("the promise got cancelled");
};
return promise;
};
在上面的代码中，您可以看到名为cancellablepromise的对象，它是一个带有附加cancel()方法的promise，正如您所看到的，它只是强制调用reject方法。这只是语法糖，不会取消 javascript promise，尽管它可能有助于编写更清晰的代码。
另一种方法是使用 abortcontroller 和 abortsignal，它们可以绑定到底层操作（例如 http 请求）以在需要时取消它。从文档中，您可以看到 abortcontroller 和 abortsignal 方法是我们在上面的代码中实现的更具表现力的实现：一旦调用 abortsignal，promise 就会被拒绝。
另一种方法是使用 rxjs 等反应式编程库，它提供了 observable 模式的实现，对异步数据流进行更复杂的控制，包括取消功能。
observables 和 promise 之间的比较
在谈到实际用例时，promise 非常适合处理单个异步操作，例如从 api 获取数据。相比之下，observables 非常适合管理数据流，例如用户输入、websocket 事件或 http 响应，其中可能会随着时间的推移发出多个值。
我们已经澄清，一旦启动，promise 就无法取消，而 observables 允许通过取消订阅流来取消。总的想法是，使用 observables，您可以拥有与对象可能交互的显式结构：
- 你创建一个 observable，然后所有的 observable 都可以订阅它
- observable 执行其工作，改变状态并发出事件。所有观察者都会收到更新——这是与承诺的主要区别。 promise 只能被解析一次，而 observables 只要有 observers 就可以不断发出事件
- 一旦观察者对 observable 中的事件不感兴趣，它就可以取消订阅，释放资源
这在下面的代码中得到了演示：
import { observable } from 'rxjs';
const observable = new observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
subscriber.complete();
});
const observer = observable.subscribe({
next(x) { console.log('received value:', x); },
complete() { console.log('observable completed'); }
});
observer.unsubscribe();
这段代码不能用 promise 重写，因为 observable 返回三个值，而 promise 只能解析一次。
为了进一步试验取消订阅方法，我们可以添加另一个将使用 takewhile() 方法的观察者：它将让观察者等待值匹配特定条件；例如，在下面的代码中，当值不为 2 时，它会不断接收来自 observable 的事件：
import { observable, takewhile } from 'rxjs';
const observable = new observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
subscriber.complete();
});
const observer1 = observable.subscribe({
next(x) { console.log('received by 1 value:', x); },
complete() { console.log('observable 1 completed'); }
});
const observer2 = observable.pipe(
takewhile(value => value != "2")
).subscribe(value => console.log('received by 2 value:', value));
在上面的代码中，observer1 与我们已经看到的相同：它只会订阅并持续接收来自 observable 的所有事件。第二个，observer2，将在条件匹配时从 observable 接收元素。在本例中，这意味着该值不同于 2。
从执行中，你可以看到两种不同的机制是如何工作的：
$ node observable.mjs Received by 1 value: 1 Received by 1 value: 2 Received by 1 value: 3 Observable 1 completed Received by 2 value: 1 $
结论
在本文中，我们研究了在 javascript 中分配 promise 的新机制，并列出了在 promise 完成之前取消 promise 的一些可能方法。我们还将 promises 与 observable 对象进行了比较，后者不仅提供 promises 的功能，还通过允许多次发出事件和适当的取消订阅机制来扩展它们。
logrocket：通过了解上下文更轻松地调试 javascript 错误
调试代码始终是一项乏味的任务。但你越了解自己的错误，就越容易纠正它们。
logrocket 允许您以新的、独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 javascript 前端的互动，使您能够准确查看用户的操作导致了错误。
logrocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头 + 正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 javascript 代码的影响从未如此简单！
免费试用。
以上就是掌握 JavaScript 中的承诺取消的详细内容，更多请关注其它相关文章！