当前位置：首页 > 文章列表 > 文章 > 前端 > 掌握 JavaScript 中的承诺取消

掌握 JavaScript 中的承诺取消

来源：dev.to 2024-09-13 08:15:46 0浏览收藏

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

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 的功能，还通过允许多次发出事件和适当的取消订阅机制来扩展它们。