ECMAScript 2017 (ES8) 之 Promise.prototype.finally

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


猜你喜欢

  • Redis 集群的高可用性和可容错性保障措施

    Redis 是一款高性能的 NoSQL 数据库,广泛应用于 Web 开发、缓存、消息队列等领域。在实际应用中,为了保证 Redis 的高可用性和可容错性,我们通常需要采用 Redis 集群的方案。

    7 个月前
  • Jest 如何进行多页面应用的测试?

    在前端开发中,我们经常需要对多页面应用进行测试,以确保应用的稳定性和可靠性。而 Jest 是一个流行的 JavaScript 测试框架,它提供了一些强大的功能来方便我们进行多页面应用的测试。

    7 个月前
  • Node.js 中的 TLS 套接字错误和修复方法

    在 Node.js 中,TLS (Transport Layer Security) 套接字是一种安全的传输协议,用于在客户端和服务器之间进行加密通信。然而,在实际开发中,我们可能会遇到一些 TLS ...

    7 个月前
  • 响应式设计中的高清图像展示方案

    随着移动设备的普及和网络带宽的提升,高清图像的展示需求越来越大。而在响应式设计中,如何在不同设备上展示高清图像也成为了一个重要的问题。本文将介绍响应式设计中的高清图像展示方案,包括使用 srcset ...

    7 个月前
  • 在 Vue.js 中如何使用 "v-for" 指令?

    Vue.js 是一款流行的前端框架,具有灵活、高效的特点。其中,"v-for" 指令是 Vue.js 中非常重要的一个指令,用于循环渲染数据,非常常用。本文将介绍 "v-for" 指令的详细使用方法,...

    7 个月前
  • Mongoose 如何在 Array 类型的数据中更新指定的元素

    Mongoose 是一个 Node.js 的 MongoDB 操作库,它可以帮助我们更方便地操作 MongoDB 数据库。在开发中,我们经常需要更新数组类型的数据,本文将介绍如何使用 Mongoose...

    7 个月前
  • Go 说的 GC 优化和性能优化都通过了吗?

    Go 语言是一种开源编程语言,由 Google 开发,旨在使编写高效且可扩展的软件变得更加容易。它使用了一种称为 Garbage Collection(垃圾回收)的技术来自动管理内存,这使得开发人员无...

    7 个月前
  • AngularJS 中的 $http 服务如何发送 GET 请求

    AngularJS 是一个流行的前端框架,它提供了很多强大的功能和服务,其中 $http 服务是其中之一。$http 服务是 AngularJS 内置的服务,用于发送 HTTP 请求。

    7 个月前
  • 解决使用 Enzyme 进行 React 组件测试时无法找到按键事件的问题

    在进行 React 组件测试时,Enzyme 是一个非常常用的工具。但是,在测试按键事件时,有时会出现无法找到按键事件的情况,这会导致测试无法正确进行。本文将介绍如何解决这个问题,让你的测试更加完善。

    7 个月前
  • TypeScript 中推荐的模块化方式及解决方案

    随着前端技术的不断发展,模块化已经成为了前端开发中不可或缺的一部分。而 TypeScript 作为一门强类型的 JavaScript 超集,也提供了多种模块化方式和解决方案。

    7 个月前
  • SPA 与 SEO 的合作

    单页面应用(SPA)是现代前端开发中常见的一种应用架构。SPA 可以提供更好的用户体验和更快的响应速度,因为它们避免了页面重新加载和服务器请求。然而,SPA 也存在一个重要的问题:搜索引擎优化(SEO...

    7 个月前
  • 前端实战:Web Components 在访客预订流程中的应用

    随着互联网的不断发展,越来越多的企业开始将业务转移到线上。在这个过程中,访客预订流程成为了企业不可或缺的一部分。如何让访客预订流程变得更加便捷、高效,成为了企业需要解决的问题。

    7 个月前
  • Chai 中的 .throw 和 .throwError 有什么区别

    在 JavaScript 的测试框架中,Chai 是一个非常流行的断言库,它提供了多种语法来编写测试用例。其中,.throw 和 .throwError 是两个用来测试函数是否抛出异常的方法。

    7 个月前
  • Promise 如何正确使用 async/await 实现顺序执行异步任务?

    在前端开发中,异步任务是非常常见的。在处理多个异步任务时,一个常见的需求就是让它们按照一定的顺序执行。而 Promise 和 async/await 则是实现异步任务顺序执行的两种常用方式。

    7 个月前
  • ECMAScript 2018 中的 yield 操作符

    在 ECMAScript 2018 中,yield 操作符被引入并成为了一个重要的特性。使用 yield 操作符,我们可以轻松实现自定义迭代器,使得代码更加简洁、易于维护。

    7 个月前
  • RxJS:使用 switchMap 优化多个接口请求

    在现代 Web 应用程序中,我们经常需要从多个 API 端点获取数据。通常情况下,这些请求之间是相互独立的,我们需要等待所有请求都完成后才能渲染我们的页面。这可能会导致页面加载时间过长和性能问题。

    7 个月前
  • CSS Grid 中自适应网格间距的技巧及其常见问题解决方案

    在前端开发中,网格布局是一种非常常见的布局方式。而在网格布局中,网格间距的设置也是非常重要的一项。本文将介绍在 CSS Grid 中如何实现自适应网格间距,并解决一些常见的问题。

    7 个月前
  • 特别实用的 CSS3 Flexbox 布局教程!

    在前端开发中,布局是一个非常重要的部分。而 CSS3 的 Flexbox 布局则是一种非常实用的布局方式。本文将介绍 Flexbox 布局的基本概念、属性以及实际应用。

    7 个月前
  • PWA 应用实践案例:从设计到开发的完整过程

    前言 PWA(Progressive Web Apps)是一种新型的 Web 应用程序,它结合了 Web 应用程序和原生应用程序的优点,可以在离线状态下使用,并且具有类似原生应用程序的交互体验,同时还...

    7 个月前
  • ESLint:避免使用过时的 ES5 语法

    在现代前端开发中,JavaScript 已经成为了不可或缺的一部分。然而,由于 JavaScript 的灵活性,开发者往往会使用一些过时的语法,这可能会导致代码的可读性和可维护性下降。

    7 个月前

相关推荐

    暂无文章