网络请求中使用 ECMAScript 2020 新特性: Promise.allSettled()

近年来,前端开发人员在工作中越来越需要学习和掌握新的 ECMAScript(也称 JavaScript)标准。ECMAScript 2020(ES2020)是最新的 JavaScript 标准,带来了很多新的特性和语法,包括对 Promise 对象的改进。

在本文中,我将介绍一个新的 Promise 对象的方法 -- Promise.allSettled(),并演示如何在网络请求中使用它。

什么是 Promise.allSettled()?

Promise.allSettled() 是 ECMAScript 2020 标准引入的新方法,它接受一个 Promise 数组作为参数,并返回一个新的 Promise,该 Promise 在所有传入的 Promise 对象都已解决或拒绝后 resolve ,并返回一个数组,该数组包含每个 Promise 对象的解决值或拒绝原因。多数时候,我们只用到 Promise.all() 方法,该方法遵循任意一个 Promise 객체失败,则整个 Promise.all() 对象会失败。但是,Promise.allSettled() 行为与 Promise.all() 不同,这也是它的优点。

以下是一个示例代码片段,在这个例子中,使用了 Promise.allSettled() 和 async/await 语法:

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

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

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

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

很明显,这段代码使用了 fetch() API,该 API 可以返回一个 Promise 对象。我们把多个 Promise 对象生成在数组中,使用 Promise.allSettled() 方法解决该数组中所有的 Promise 对象,然后输出结果。不管是 promise 对象中最后获取资源成功的数据,还是失败的错误提示,都在这个例子中被捕获到,因为 Promise.allSettled() 确保所有 Promise 在处理完成后都会执行相应的操作。

Promise.allSettled() 与 Promise.all() 的区别

Promise.all() 和 Promise.allSettled() 都可以用来购合多个 Promise 实例。然而,它们之间有一些重要的区别。

  • Promise.all() 遵循短路规则,即如果其中一个 Promise 失败,它将立即拒绝,并且所有其他 Promise 将被忽略。与之相反,Promise.allSettled() 在所有 Promise 完成时都解决并返回它们的结果。

  • Promise.all() 只返回拒绝原因,而 Promise.allSettled() 返回成功和失败结果。如果一个 Promise 实例已经解决了,它将返回一个状态为 "fulfilled" 的对象,该对象只是响应数据;如果一个 Promise 实例已经拒绝了,Promise.allSettled() 将返回一个状态为 "rejected" 的对象,该对象包含一个错误对象。

  • Promise.allSettled() UI 友好。如果我们在 Promise.all() 中遇到错误,该 Promise 立即被拒绝并且直接挂起。然而 Promise.allSettled() 不同,当 Promise 对象被拒绝时,我们有机会处理 Promise 结束后返回的数据。

使用 Promise.allSettled() 的场景

Promise.allSettled() 由于可以返回成功和失败的数据,所以它在以下场合中特别有用:

  • 执行需要所有 Promise 完成的顺序无关或顺序无关的操作。

  • 让代码在每个 Promise 结束后执行回调,不管是失败还是成功。

  • 把执行异步任务后检查所有任务的失败或成功。这在执行流程良好的集成测试或单元测试中特别有用。

  • 有一组异步任务,您必须要等待所有异步任务完成才可以执行其他任务。

  • 读取多个 HTTP API,需要每个 API 请求都成功后再执行操作。

总结

本文介绍了 ECMAScript 2020 引入的新方法 Promise.allSettled(),以及当在网络请求时使用该方法的优点。我们还比较了该方法和 Promise.all() 方法之间的区别,并列举这样使用方法的场景。

总的来说,Promise.allSettled() 是一种非常有用的 JavaScript 新特性,可以简化我们的异步编程代码,并在代码流程的错误处理中提供了更多的灵活性。我希望本文能够帮助您更好地了解它,以及如何将其集成到您的代码中。

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


猜你喜欢

  • 使用 Fastify 和 MongoDB 实现自定义字段搜索教程

    在 Web 开发中,数据的搜索是一个非常常见的需求。然而,很多时候我们需要对自定义字段进行搜索,如何实现呢?本文将介绍如何使用 Fastify 和 MongoDB 实现自定义字段搜索,并带你深入理解其...

    1 年前
  • ES6 中的类的继承与静态方法的实现

    ES6 中的类的继承与静态方法的实现 ES6 是 JavaScript 的一次重大更新,引入了很多新特性,其中最重要的莫过于 Class 的概念,让 JS 实现面向对象编程更为简单和直观。

    1 年前
  • Redis 删除所有 Key 的正确姿势

    Redis 是一个开源的键值对存储数据库,它支持多种数据结构,被广泛应用于缓存、消息队列、排行榜等场景。然而在使用 Redis 时,有时会遇到需要删除所有 Key 的情况,本篇文章将介绍 Redis ...

    1 年前
  • Vue.js 中使用 transition 实现动画效果

    Vue.js 是一个流行的 JavaScript 框架,用于构建现代化的 Web 应用。在 Vue.js 中使用 transition,可以实现优美的动画效果。本文将介绍 transition 的基本...

    1 年前
  • 如何使用 Flexbox 实现日历布局

    在日常的前端开发中,日历布局是经常遇到的一种布局。传统的布局方式需要通过复杂的 CSS 和 JavaScript 进行实现,而使用 Flexbox 则可以更加简便地实现这一布局。

    1 年前
  • Headless CMS 构建微服务应用的指南

    在现代的前端开发领域中,构建微服务应用已经成为了一种趋势。而随着 Headless CMS 不断地走红,它已成为了前端构建微服务应用的重要一环。本篇文章将会深入地介绍 Headless CMS,以及...

    1 年前
  • MongoDB 与 Mongoose 结合使用的最佳实践

    前言 MongoDB 是一个非常流行的 NoSQL 数据库,它的数据存储方式非常灵活,支持众多编程语言。在 Node.js 应用程序中,我们可以通过使用 Mongoose 驱动程序与 MongoDB ...

    1 年前
  • 在 AngularJS 的 SPA 中使用 HTML5 模式的优缺点

    随着 AngularJS 技术的日益成熟和普及,单页应用程序 (SPA) 的开发越来越普遍。为了提高移动应用程序的用户体验,我们可以使用 HTML5 模式来改善页面的加载速度和 SEO。

    1 年前
  • 教你轻轻松松这样写出好看的 Express.js 代码

    Express.js 是一个灵活且广泛使用的 Node.js Web 应用程序框架,也是 Node.js 开发过程中最受欢迎的框架之一。然而,写出优雅美观的 Express.js 代码并不是一件容易的...

    1 年前
  • 如何在 TailwindCSS 中使用自定义 CSS 预处理器?

    TailwindCSS 是一个高度可定制的 CSS 框架,可以帮助我们快速构建美观的网页。除了自带的样式以外,我们还可以使用自定义 CSS 预处理器来扩展 TailwindCSS 的样式定义,为我们的...

    1 年前
  • TypeScript 中泛型函数的实现方式

    在 TypeScript 中,泛型函数是一种非常常用的技术手段。泛型函数是指能够接受不同类型的参数,从而使得函数的灵活性大大增强。本文将介绍 TypeScript 中泛型函数的实现方式,包括函数定义和...

    1 年前
  • ES10 中的函数式编程

    随着 JavaScript 的快速发展,函数式编程已经成为了一种流行的编程范式。在 ES10 中,我们可以使用一些新的函数式编程特性来更好地处理数据,通过这篇文章,你将会学习到一些 ES10 中新的函...

    1 年前
  • 使用 Jest 测试 Vue.js 组件

    在 Vue.js 应用程序中,组件是构建用户界面的关键部分。为了确保它们在不同的环境和配置下的正确运行,您需要对它们进行测试。 Jest 是一个流行的 JavaScript 测试工具,它可以帮助您有效...

    1 年前
  • Serverless: 如何扩展现有的 Kubernetes 集群

    在现代软件开发中,Serverless已经成为了越来越受欢迎的架构风格。其能够帮助提高开发人员的效率、降低开发成本,同时也能够为企业提供更加稳定、可靠的系统架构体系。

    1 年前
  • CSS Grid 实现表格布局的技巧和方法

    CSS Grid 是一种强大的布局方式,可以帮助前端工程师更加灵活地实现网页布局。其中一个常见需求就是实现表格布局,本文将深入探讨如何使用 CSS Grid 实现表格布局,并提供代码示例。

    1 年前
  • Hapi.js 实战:使用 joi-string-extensions 进行字符串校验

    在现代 Web 开发中,数据校验是非常重要的一环。而在实际的开发中,字符串的校验往往也是最常用的一种校验方式。针对这种情况,有一个非常好用的 Node.js 库——Hapi.js。

    1 年前
  • 在 SASS 中使用占位符的主要作用

    在SASS中使用占位符的主要作用 SASS是一种基于CSS扩展的语言,它可以提供比纯CSS更多的功能和选项,使得开发人员可以更加轻松地编写和维护CSS文件。其中占位符是一种非常有用的功能,它可以帮助在...

    1 年前
  • 如何利用 ESLint 调试 Webpack 打包问题

    前言 在前端开发中,Webpack 是一个广泛应用的打包工具。但在使用过程中,我们经常会遇到各种打包相关的问题,而且错误信息往往不是很详细,难以定位问题原因。ESLint 是一个非常优秀的代码检查工具...

    1 年前
  • 学习 ES11:ES2020 中的 String.prototype.matchAll 方法详解

    在 ECMAScript 2020 中,新增了一个 String.prototype.matchAll() 方法,这个方法可以从字符串中匹配所有符合正则表达式的字符串,并返回一个迭代器,包含每个匹配的...

    1 年前
  • Kubernetes 集群中 Pod 之间的通信方式

    Kubernetes 是一个流行的容器编排工具,它允许我们快速部署和管理容器化应用程序。在 Kubernetes 集群中,Pod 是最小的部署单元,它由一个或多个容器组成,它们可以共享相同的网络命名空...

    1 年前

相关推荐

    暂无文章