Promise.prototype.finally 的 Polyfill 实现

在前端开发中,我们经常使用 Promise 对象来处理异步操作,而 Promise.prototype.finally() 方法是一个在 Promise 执行结束时无论其结果如何都会执行的方法,可用于清除任何在 Promise 链中残留的资源。但是该方法在旧版本的浏览器中可能不被支持,因此为了兼容性,需要进行 Polyfill 实现。

Polyfill 实现

方法一:使用 Generator 函数

利用 Generator 函数来实现 Promise.prototype.finally(),其实现步骤如下:

  1. 定义一个 Generator 函数,函数中使用 yield 暂停代码执行,并返回一个 Promise 对象
  2. 在 yield 函数体中调用 Promise.then() 方法来处理 resolve 结果,Promise.catch() 方法来处理 reject 结果
  3. 在 finally 函数中,使用 return 命令将最终结果返回

示例代码如下:

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

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

方法二:使用 Promise.resolve()

该方法的实现利用 Promise.resolve() 方法来实现 Promise.prototype.finally(),其主要思路如下:

  1. 定义一个 Promise 对象,在 Promise 对象中利用 Promise.resolve() 方法来处理 Promise 链中传递的值快速返回一个 promise 对象,同时在 finally 函数中调用 resolve() 方法来返回一个 Promise 对象
  2. 将该 Promise 对象与当前的 Promise 链进行拼接,来实现实现 Promise.prototype.finally() 方法的扩展

示例代码如下:

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

总结

在实际开发中,由于 Promise.prototype.finally() 方法不是所有浏览器均支持,而为了更好的兼容性,我们需要学会 Polyfill 实现。上述介绍的两种方法都是实现 Promise.prototype.finally() 方法的可行方案,具体实现根据场景的不同选择不同的方法,以便更好的适应开发需求。

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


猜你喜欢

  • Next.js 前置条件及踩坑指南

    前置条件 Next.js 是一款支持服务端渲染的 React 框架,使用它需要具备以下知识: React 基础知识,包括 JSX 语法、组件原理和生命周期等。 Node.js 基础知识,包括模块化开...

    1 年前
  • 在 Hugo 项目中如何快速使用 Tailwind CSS?

    Tailwind CSS 是一个快速、高效、可定制的 CSS 框架,它提供了大量的 CSS 类,可以快速构建出美观、响应式的界面。在 Hugo 项目中使用 Tailwind CSS,可以快速构建出自己...

    1 年前
  • JavaScript:string replaceAll 的纠缠,从 ECMAScript 2017 (ES8) 到 JavaScript 2021

    string replaceAll() 是 JavaScript 中一个非常常用的字符串方法,可以替换字符串中所有匹配的子串,但其在不同版本的 ECMAScript 和浏览器中的表现并不一致,甚至有过...

    1 年前
  • 如何快速构建 Kubernetes 集群?

    在前端开发领域,Kubernetes(简称 K8s)作为一款开源的容器编排管理工具,已经逐渐成为了云计算和容器化应用开发的标配。它可以帮助我们轻松地部署应用程序,并实现水平扩展、负载均衡、自动伸缩、自...

    1 年前
  • 响应式设计最佳实践总结

    在现今的移动互联网时代,响应式设计已经成为了前端开发的一项重要技能。响应式设计可以让网站或应用在不同屏幕尺寸下均能够呈现完美的布局和用户体验,而这也是移动优化和用户体验的重要手段之一。

    1 年前
  • 如何使用 Material Design 实现正方形圆角 Button?

    Material Design 是 Google 推出的一种现代化设计语言,提供了统一的视觉体验和交互设计规范,旨在帮助开发者构建现代化的 Web 应用程序和移动应用程序。

    1 年前
  • 如何在 GraphQL 中使用分片技术

    GraphQL是一种强类型的查询语言。它提供了一种编写 API 的方式,可以在客户端精确地请求所需的数据。GraphQL中的分片技术可以帮助开发人员更好地管理复杂的查询,提高代码的重用性和可维护性。

    1 年前
  • 解决使用 ECMAScript 2015 后出现的 for...of 循环 Bug

    随着 ECMAScript 2015 (ES6)规范的普及和使用,越来越多的 JavaScript 开发人员开始使用 for...of 循环来遍历对象中的元素。然而,使用 for...of 循环时经常...

    1 年前
  • 解决 Redux 刷新后 state 失效的问题

    问题背景 在前端开发中,Redux 已经成为了一个不可或缺的状态管理工具。然而有时候会遇到一个问题:当用户进行页面刷新后,原本存在于 Redux 中的 state 数据会被清空,导致应用无法正常运作。

    1 年前
  • Enzyme 测试 React 组件时如何模拟 Redux store 的状态

    Enzyme 测试 React 组件时如何模拟 Redux store 的状态 在 React 开发中,我们经常会用到 Redux 来管理应用的状态。在测试组件时,很多时候需要模拟 Redux sto...

    1 年前
  • 开源 Headless CMS 列表 —— Strapi、GraphCMS、Contentful、DatoCMS

    随着前端工具的不断更新和开发,CMS 的重要性也越来越被关注。传统的 CMS 使用起来笨重,不易扩展,而新型的 Headless CMS 则可以更好的适应前端工具的使用需求。

    1 年前
  • Hapi 框架中实现 OAuth2.0 认证教程

    OAuth2.0 是一种授权框架,可以在第三方应用程序中提供对受保护资源的有限访问。在本文中,我们将探讨如何使用 Hapi 框架在 Node.js 应用程序中实现 OAuth2.0 认证。

    1 年前
  • Server-sent Events 对比 WebSockets:区别和应用场景介绍

    前端开发中,常常需要实现实时通信的功能,如实时聊天、数据推送等。在实现这些功能时,常用的两种技术是 Server-sent Events 和 WebSockets。

    1 年前
  • MongoDB 模糊搜索方法及实例讲解

    在前端开发中,我们经常面临需要对数据库进行模糊搜索的需求。MongoDB 是一种非常流行的 NoSQL 数据库,在搜索方面也提供了丰富的功能。本文将介绍 MongoDB 中模糊搜索的方法以及实例讲解,...

    1 年前
  • 使用 PWA 技术构建离线电商应用程序

    前言 PWA(Progressive Web Apps)是一种基于 Web 技术构建的应用程序,具有原生 APP 的交互体验,但又不需要下载安装,可以直接在浏览器中访问。

    1 年前
  • 使用 Socket.io 中的 Room 实现聊天室

    前言 在前端开发过程中,聊天室是一个常见的功能需求,而 Socket.io 是一种广泛使用的实时通信框架,它提供了一个灵活而强大的工具来构建实时 web 应用程序。

    1 年前
  • 解决 ES7 新特性使用时遇到的 SyntaxError 错误

    JavaScript 是一门非常灵活的语言,它的标准不断发展,迭代更新。ES6/ES2015 中引入了很多新的特性和语法糖,ES7/ES2016 继续完善和补充了一些特性。

    1 年前
  • 在 TypeScript 中如何使用外部 JavaScript 库?

    在 TypeScript 中如何使用外部 JavaScript 库? 随着 TypeScript 的普及,使用 TypeScript 开发 JavaScript 应用已经成为了一种趋势。

    1 年前
  • 基于 JavaScript Promise 实现国际化回调方法

    在国际化开发中,我们经常会遇到需要在不同语言环境下回调不同的函数的情况。传统的做法可能是使用 if/else 语句对语言进行判断,然后进行相应的回调。但是这种方式不够灵活,代码也比较冗长。

    1 年前
  • Cypress 如何模拟移动设备的操作

    Cypress 是一种常用的前端测试框架,它具有易用性和高可维护性等特点,以及强大的自动化测试功能。同时,Cypress 还支持模拟移动设备的操作。在本文中,我们将详细介绍 Cypress 如何模拟移...

    1 年前

相关推荐

    暂无文章