全新的 Promise.prototype.finally() 方法解析 ES8 新特性-JavaScript中文网-JavaScript教程资源分享门户

在 ES8 中，JavaScript 引入了一个新的特性：Promise.prototype.finally() 方法。这个方法允许开发人员在 Promise 链中添加一个回调函数，这个回调函数在 Promise 链中的最后一个 then() 调用之后执行，无论 Promise 链是否成功或失败。

Promise 基础

在介绍 Promise.prototype.finally() 方法之前，我们需要先了解 Promise 的基本概念和使用方法。

Promise 是一种异步编程模型，用于处理异步操作。Promise 有三种状态：Pending、Fulfilled 和 Rejected。当 Promise 被创建时，它处于 Pending 状态。当 Promise 成功执行时，它进入 Fulfilled 状态。当 Promise 执行失败时，它进入 Rejected 状态。

Promise 有两个重要的方法：then() 和 catch()。then() 方法用于在 Promise 成功执行时执行回调函数，而 catch() 方法用于在 Promise 执行失败时执行回调函数。

下面是一个简单的 Promise 示例：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 模拟异步操作
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber);
    } else {
      reject(new Error('Random number is too small'));
    }
  }, 1000);
});

promise
  .then(result => console.log(`Success: ${result}`))
  .catch(error => console.error(`Error: ${error}`));

在上面的示例中，我们创建了一个 Promise，模拟了一个异步操作。在异步操作完成后，如果生成的随机数大于 0.5，则 Promise 进入 Fulfilled 状态，否则进入 Rejected 状态。在 Promise 进入 Fulfilled 状态时，我们使用 then() 方法执行回调函数，在 Promise 进入 Rejected 状态时，我们使用 catch() 方法执行回调函数。

Promise.prototype.finally() 方法

Promise.prototype.finally() 方法是 ES8 中新增的方法，用于在 Promise 链中添加一个回调函数，这个回调函数在 Promise 链中的最后一个 then() 调用之后执行，无论 Promise 链是否成功或失败。

下面是一个使用 Promise.prototype.finally() 方法的示例：

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 模拟异步操作
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber);
    } else {
      reject(new Error('Random number is too small'));
    }
  }, 1000);
});

promise
  .then(result => console.log(`Success: ${result}`))
  .catch(error => console.error(`Error: ${error}`))
  .finally(() => console.log('Promise finished'));

在上面的示例中，我们添加了一个 finally() 方法，在 Promise 链的最后一个 then() 调用之后执行。在这个示例中，无论 Promise 是否成功或失败，都会执行 finally() 方法。

Promise.prototype.finally() 方法的使用场景

Promise.prototype.finally() 方法可以被用于很多场景，比如清理资源、取消请求等等。

下面是一个使用 Promise.prototype.finally() 方法取消请求的示例：

// javascriptcn.com 代码示例
const controller = new AbortController();
const { signal } = controller;

const promise = fetch('https://example.com', { signal });

promise
  .then(response => response.json())
  .catch(error => console.error(`Error: ${error}`))
  .finally(() => controller.abort());

在上面的示例中，我们使用 AbortController API 来取消请求。在 Promise 链的最后一个 then() 调用之后，我们调用了 abort() 方法来取消请求。

总结

Promise.prototype.finally() 方法是 ES8 中新增的方法，用于在 Promise 链中添加一个回调函数，这个回调函数在 Promise 链中的最后一个 then() 调用之后执行，无论 Promise 链是否成功或失败。Promise.prototype.finally() 方法可以被用于很多场景，比如清理资源、取消请求等等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65785e7dd2f5e1655d245c1c