掌握 JavaScript 中的承诺取消

珍惜时间，勤奋学习！今天给大家带来《掌握 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);
    });

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 代码的影响从未如此简单！

免费试用。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~