ECMAScript 2017 (ES8) 之 Promise.prototype.finally

阅读时长 4 分钟读完

Promise.prototype.finally 是 ECMAScript 2017 (ES8) 新增的一个方法,用于在 Promise 执行结束后,无论是 resolve 还是 reject,都能执行指定的回调函数。

为什么需要 Promise.prototype.finally

在 Promise 中,我们经常需要在 Promise 执行结束后执行一些回调函数,比如关闭 loading 状态、清除定时器等操作。在 ES6 中,我们可以使用 Promise.prototype.then 方法来实现这个功能,但是 then 方法只能接收 resolve 的结果,而不能接收 reject 的结果,而且 then 方法也无法阻止 Promise 的 reject 抛出异常。因此,Promise.prototype.finally 方法应运而生,它可以接收 resolve 和 reject 的结果,而且无论 Promise 是 resolve 还是 reject,都能执行指定的回调函数。

如何使用 Promise.prototype.finally

Promise.prototype.finally 方法接收一个回调函数作为参数,该回调函数在 Promise 执行结束后执行。该回调函数不接收任何参数,也不会改变 Promise 的状态,只是用于执行一些清理工作。

下面是一个使用 Promise.prototype.finally 方法的示例代码:

-- -------------------- ---- -------
------------------
  -------------- -- ----------------
  ---------- -- -
    -- -------
  --
  ------------ -- -
    -- -------
  --
  ----------- -- -
    -- -- ------- --
  ---

在上面的代码中,我们使用 fetch API 来获取数据,并使用 Promise.prototype.then 和 Promise.prototype.catch 来处理 resolve 和 reject 结果,最后使用 Promise.prototype.finally 来关闭 loading 状态。

Promise.prototype.finally 的注意事项

需要注意的是,Promise.prototype.finally 方法返回的是一个新的 Promise 实例,该实例的状态和原始的 Promise 实例状态相同,但是它的值是 undefined。另外,如果回调函数返回一个 Promise 实例,那么该实例的状态和值会影响返回的 Promise 实例的状态和值。

下面是一个回调函数返回 Promise 实例的示例代码:

-- -------------------- ---- -------
------------------
  -------------- -- ----------------
  ---------- -- -
    -- -------
  --
  ------------ -- -
    -- -------
  --
  ----------- -- -
    ------ --- --------------- -- -
      ------------- -- -
        ----------
      -- ------
    ---
  --
  -------- -- -
    -- -- ------- --
  ---

在上面的代码中,回调函数返回了一个 Promise 实例,该实例会在 1 秒后 resolve,然后执行 Promise.prototype.then 方法中的回调函数。

总结

Promise.prototype.finally 方法是 ECMAScript 2017 (ES8) 新增的一个方法,用于在 Promise 执行结束后,无论是 resolve 还是 reject,都能执行指定的回调函数。它的使用方法和 Promise.prototype.then 方法类似,但是它可以接收 resolve 和 reject 的结果,而且无论 Promise 是 resolve 还是 reject,都能执行指定的回调函数。同时需要注意的是,Promise.prototype.finally 方法返回的是一个新的 Promise 实例,该实例的状态和原始的 Promise 实例状态相同,但是它的值是 undefined。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65f532372b3ccec22fd550d2

纠错
反馈