ES9 中的 Promise.prototype.finally() 方法使用及注意点

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

Promise.prototype.finally() 是在 ES2018 引入的新方法,它允许你在 Promise 对象 fulfilled 或 rejected 后,无论如何最终都会执行一个回调函数。这个方法将会返回一个新的 Promise 对象,可以被链式调用。在本文中,我们将会介绍 Promise.prototype.finally() 方法的使用方法、注意点以及它在实际中的作用。

使用方法

Promise.prototype.finally() 方法只接受一个回调函数参数,这个参数可以是任何合法的推迟执行逻辑代码的函数。无论 Promise 状态是成功还是失败,这个回调函数都将被执行,而且该函数没有参数,也不能改变 Promise 即将返回的值。

下面是一个简单的例子:

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

此例子将会在 fetch 请求结束后,执行 console.log('请求结束') 语句。不管 Promise 是成功还是失败,最重要的是无论如何都将会执行该示例中的回调函数。

注意点

使用 Promise.prototype.finally() 方法有几个注意点需要我们注意:

返回一个新 Promise

这个方法返回一个新的 Promise 对象,不同于 Promise.prototype.then() 或 Promise.prototype.catch() 可以改变 Promise 的状态和值,Promise.prototype.finally() 只能返回一个新的 Promise 对象,且它不会触发任何进一步的操作。

无数据返回

Promise.prototype.finally() 方法将不会对 Promise 的结果进行操作,它仅仅是推迟执行一个操作,并返回一个新的 Promise 对象。所以,这个方法是不会返回一些数据的。如果您需要获取 Promise 对象中的返回数据,您仍然需要在 .then() 或 .catch() 方法中处理。

不负责前置条件

Promise.prototype.finally() 方法并不关心前置条件是否满足,即它不在乎前置条件是否已经完成。如果您需要在传入的回调函数执行之前判断一些条件是否成立,您需要在回调函数内部进行判断。

实际作用

Promise.prototype.finally() 方法是一个很有用的方法,它提供了一个一致的方式在一个 Promise 结束之后执行某些逻辑。尤其是在处理异步操作,需要做一些相应的增强逻辑时,这个方法可以避免我们重复书写代码。

下面是一个例子,假设我们有一个需要上传图片的函数,并且需要在上传结束后隐藏一个 loading 遮罩层:

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

上述代码可以很直观地看出,不论是请求成功还是失败,loading 元素都将被隐藏。Promise.prototype.finally() 的使用使我们可以在所有异步操作结束后,更新时变量或者执行一些相关操作。

结论

Promise.prototype.finally() 方法是一个非常方便的语法糖。虽然它只是推迟执行单个操作,不做其他操作,但它对处理异步操作代码提供了更加轻松和简单的方式。它不仅可以处理 Promise 函数中出现的错误,而且也能够对 Promise 中的数据进行注入,从而使开发人员的代码更加可读。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671d38ef9babaf620fb51359


猜你喜欢

  • 使用 PostgreSQL 进行数据库性能优化的方法

    PostgreSQL 是一种强大的关系型数据库管理系统,为网站和应用提供了高性能、稳定和安全的数据存储解决方案。但是在使用 PostgreSQL 进行开发和部署时,性能问题往往会成为制约应用性能和可靠...

    14 天前
  • 解除 JavaScript Promise 内存泄露的 5 种方法

    在编写 JavaScript 代码时,我们经常使用 Promise 来处理异步操作。但是,在使用 Promise 时我们也需要注意它可能会产生内存泄露,如果不及时处理,就会导致浏览器的内存占用过高,影...

    14 天前
  • 利用 SASS 优化 CSS 性能

    现代 Web 应用程序需要响应快速且性能高效的用户界面。CSS 是构建这种界面的关键之一,但是在项目变得庞大和复杂时,CSS 可能会变得难以管理和维护。这时候,就需要一种更好的方式来解决 CSS 的问...

    14 天前
  • 使用 PM2 和 Nginx 来部署和管理 Node.js 应用程序

    在现代 Web 应用程序中,Node.js 是一个广泛使用的技术。Node.js 使得开发人员可以使用 JavaScript 编写和运行服务器端的代码,从而允许他们构建高效和可靠的应用程序。

    14 天前
  • React Native 在现有原生项目中必要的集成

    React Native 是一种由 Facebook 推出的跨平台框架,能够使用 JavaScript 编写真正原生的 iOS 和 Android 应用程序。许多公司已经开始考虑将 React Nat...

    14 天前
  • 在 Deno 中使用 JavaScript 模块

    前言 Deno 是一个安全的 JavaScript 和 TypeScript 运行时环境,由 Node.js 的创始人 Ryan Dahl 开发。它提供了像浏览器一样的原生模块化支持,能够轻松地引入以...

    14 天前
  • 如何使用 Express.js 轻松创建 REST API

    在现代互联网应用中, REST API (Representational State Transfer Application Programming Interface) 已经成为了开发后端服务的...

    14 天前
  • 如何在 Vue.js SPA 中防止重复请求 API?

    在一个 Vue.js 单页面应用程序中,经常需要发送 AJAX 请求,以便取回所需的数据。但当用户频繁操作时,可能会导致同一个 API 被多次请求,这会导致不必要的服务器负载和网络带宽浪费。

    14 天前
  • ECMAScript 2021 (ES12) 中的 Nullish Coalescing 运算符及其使用场景

    在 ECMAScript 2021 中,新增了一个 Nullish Coalescing 运算符,即 ??。这个运算符主要用来判断一个值是否为 null 或 undefined,如果是的话,就使用另一...

    14 天前
  • Vue.js 中如何优化复杂页面的渲染性能?

    Vue.js 是一款非常流行的前端框架。它提供了一套完整的工具链,可以轻松地构建复杂的单页面应用程序(SPA)。然而,在开发大型的应用程序时,可能会遇到渲染性能方面的问题。

    14 天前
  • 使用 Cypress 进行前端 E2E 自动化测试遇到的常见问题及解决方案

    前言 随着前端开发的不断发展,自动化测试在项目中扮演着越来越重要的角色。而 Cypress 作为目前比较流行的前端 E2E 自动化测试工具,不仅具有简便易用、高效稳定的特点,而且能够极大提高测试效率,...

    14 天前
  • 使用 Kubernetes 完成云端部署和应用扩展

    介绍 随着云计算和微服务架构的流行,Kubernetes 成为目前最流行的容器编排工具。它可以自动化地部署、扩展和管理容器化应用程序,同时提供一种高效的方法来管理多个容器。

    14 天前
  • 如何使用 CSS Reset 消除字母转换的影响

    介绍 在网页设计中,尤其是前端开发中,我们经常会遇到字母转换的问题。比如说,我们在编写 HTML 代码时使用了一个 h2 标签,但是在添加 CSS 样式后,发现字号设定的不对,变成了 h3 的大小。

    14 天前
  • CSS Grid 与 Flexbox 在响应式布局中的对比

    在前端开发中,布局无疑是最重要的一部分。而在响应式布局中,CSS Grid 和 Flexbox 都是比较流行的选择。那么这两种布局方式有什么区别呢?本文将对此进行详细的介绍,并给出相应的示例代码。

    14 天前
  • 如何实现 Flexbox 布局下的流式布局

    前言 随着网站和应用程序越来越复杂,我们需要更多的布局方式以创建灵活和响应式的设计。Flexbox 布局是 CSS3 引入的一种强大的布局技术,它支持水平和垂直对齐以及自适应的大小。

    14 天前
  • RESTful API 的单元测试

    RESTful API 已经成为了现代 Web 应用程序的标准式架构。在设计和开发 Rest API 时,除了有效地处理 HTTP 请求和响应之外,保证 API 的可操作性、可靠性和安全性是至关重要的...

    14 天前
  • 使用 Express.js 和 WeChat 进行互联登录

    在当前的互联网时代,人们经常会使用多种不同的应用程序、网站和工具,每个应用程序都需要用户进行登录。而对于大多数用户而言,他们不想为每个应用程序设置账号和密码,这就需要互联登录。

    14 天前
  • Material Design 中如何使用 SwipeMenuListView?

    在 Android 应用程序的开发中,SwipeMenuListView 是一个非常常见的交互式控件。而在 Material Design 中,SwipeMenuListView 被广泛地应用于移动设...

    14 天前
  • Koa.js 应用部署流程及常见问题汇总

    Koa.js 是一个轻量级、模块化的 Node.js Web 应用框架。它使用了 ES6 的语法特性,并且最大限度地利用了 JavaScript 的异步和 await 特性,可以让开发者更加方便地编写...

    14 天前
  • Babel插件开发:一个例子全面解析

    作为一名前端开发者,你可能已经听说过Babel,这是一个强大的JS编译器,它可以将ES6+的代码转换成可在所有浏览器上运行的ES5代码。Babel的核心功能是以插件的形式开发的,这就意味着开发人员可以...

    14 天前

相关推荐

    暂无文章