前端JavaScript篇之Promise解决了什么问题、Promise.all和Promise.race的区别的使用场景

目录

  • Promise解决了什么问题
  • Promise.all和Promise.race的区别的使用场景


Promise解决了什么问题

Promise 解决了 JavaScript 中回调地狱的问题。在传统的回调函数中,如果需要依次执行多个异步操作,就需要使用嵌套的回调函数,这样会导致代码难以维护和阅读,形成所谓的“回调地狱”。而 Promise 对象则可以让异步操作的执行顺序更加清晰和可读,避免了回调地狱的问题。

Promise 对象的另一个重要作用是处理异步操作的解决和拒绝情况。在传统的回调函数中,如果异步操作出现错误,就需要手动调用回调函数的第二个参数来处理错误,这样会导致代码冗长和不易维护。而 Promise 对象则可以通过 then()catch() 方法来处理异步操作的解决和拒绝情况,使代码更加简洁和易于维护。

因此,Promise 对象是一种非常重要的异步编程模式,它可以提高代码的可读性和可维护性,同时也可以避免一些常见的错误和降低代码的复杂度。

假设我们需要从一个 API 中获取用户信息和用户的所有订单信息,然后将它们合并为一个对象并输出。在传统的回调函数中,可能需要使用嵌套的回调函数来依次获取用户信息和订单信息,代码可能会变得非常复杂和难以维护。而使用 Promise 对象则可以让代码变得更加简洁和易于理解。

function getUserInfo(userId) {return new Promise((resolve, reject) => {// 发送获取用户信息的请求const userInfo = {name: 'John',age: 30,address: '123 Main St'}// 模拟请求延迟setTimeout(() => {resolve(userInfo)}, 1000)})
}function getUserOrders(userId) {return new Promise((resolve, reject) => {// 发送获取用户订单的请求const userOrders = [{ id: 1, product: 'Apple', price: 1.99 },{ id: 2, product: 'Banana', price: 0.99 },{ id: 3, product: 'Orange', price: 2.99 }]// 模拟请求延迟setTimeout(() => {resolve(userOrders)}, 1500)})
}// 合并用户信息和订单信息
Promise.all([getUserInfo(123), getUserOrders(123)]).then(([userInfo, userOrders]) => {const result = {userInfo,userOrders}console.log(result)}).catch(error => {console.error(error)})

请添加图片描述

在上面的代码中,我们定义了两个函数 getUserInfo()getUserOrders(),它们分别用于获取用户信息和用户订单信息。这两个函数返回的都是 Promise 对象,通过 resolve() 方法返回异步操作的结果。

然后,我们使用 Promise.all() 方法来并行执行这两个异步操作,并在它们都完成后将结果合并为一个对象。最后,我们通过 then() 方法来获取合并后的结果,并将其输出到控制台。如果任何一个异步操作出现错误,则会通过 catch() 方法捕获并输出错误信息。

通过使用 Promise 对象,我们可以将异步操作的顺序和结果变得更加清晰和易于理解,同时避免了嵌套的回调函数和复杂的代码结构。

Promise.all和Promise.race的区别的使用场景

Promise.all()Promise.race() 都是 Promise 对象的静态方法,它们可以用于处理多个异步操作的结果。

Promise.all() 方法会并行执行多个异步操作,并在它们都完成后返回一个包含所有异步操作结果的数组,或者在任何一个异步操作出现错误时返回错误信息。

Promise.all([promise1, promise2, promise3]).then(([result1, result2, result3]) => {// 所有异步操作都完成了,可以处理结果了}).catch(error => {// 任何一个异步操作出现错误,都会在这里捕获并处理})

Promise.race() 方法则会并行执行多个异步操作,并在其中任何一个异步操作完成后立即返回该异步操作的结果,忽略其他异步操作的结果。这个方法适用于需要在多个异步操作中选择一个最快的结果的场景,例如超时控制。

Promise.race([promise1, promise2, promise3]).then(result => {// 最快的异步操作完成了,可以处理结果了}).catch(error => {// 任何一个异步操作出现错误,都会在这里捕获并处理})

需要注意的是,Promise.race() 方法只会返回最快完成的异步操作的结果,并忽略其他异步操作的结果。如果其他异步操作仍在继续执行,它们的结果将被忽略。因此,在使用 Promise.race() 方法时需要特别小心,确保所有异步操作都能够正常完成,避免出现意外情况。

假设我们需要从两个不同的 API 中获取数据,一个是获取用户信息的 API,另一个是获取用户订单信息的 API。我们需要等待这两个异步操作都完成后才能将它们合并为一个对象并输出到控制台。同时,我们还需要设置一个超时时间,如果在规定时间内没有获取到任何一个异步操作的结果,就需要输出一个错误信息。

使用 Promise.all()Promise.race() 的案例和效果。

function getUserInfo(userId) {return new Promise((resolve, reject) => {// 发送获取用户信息的请求const userInfo = {name: 'John',age: 30,address: '123 Main St'}// 模拟请求延迟setTimeout(() => {resolve(userInfo)}, 1000)})
}function getUserOrders(userId) {return new Promise((resolve, reject) => {// 发送获取用户订单的请求const userOrders = [{ id: 1, product: 'Apple', price: 1.99 },{ id: 2, product: 'Banana', price: 0.99 },{ id: 3, product: 'Orange', price: 2.99 }]// 模拟请求延迟setTimeout(() => {resolve(userOrders)}, 1500)})
}// 获取用户信息和订单信息
const userInfoPromise = getUserInfo(123)
const userOrdersPromise = getUserOrders(123)// 同时等待两个异步操作完成
Promise.all([userInfoPromise, userOrdersPromise]).then(([userInfo, userOrders]) => {const result = {userInfo,userOrders}console.log(result)}).catch(error => {console.error(error)})// 设置一个超时时间
const timeoutPromise = new Promise((resolve, reject) => {setTimeout(() => {reject(new Error('Timeout'))}, 2000)
})// 等待超时或者获取到任何一个异步操作的结果
Promise.race([userInfoPromise, userOrdersPromise, timeoutPromise]).then(result => {if (result instanceof Error) {console.error(result)} else {console.log('Got result:', result)}}).catch(error => {console.error(error)})

请添加图片描述

在上面的代码中,我们首先定义了两个函数 getUserInfo()getUserOrders(),它们分别用于获取用户信息和用户订单信息。这两个函数返回的都是 Promise 对象,通过 resolve() 方法返回异步操作的结果。

然后,我们分别使用这两个函数来获取用户信息和订单信息,并将它们封装成 Promise 对象。我们使用 Promise.all() 方法来并行执行这两个异步操作,并在它们都完成后将结果合并为一个对象并输出到控制台。如果任何一个异步操作出现错误,则会通过 catch() 方法捕获并输出错误信息。

接着,我们定义了一个超时时间为 2 秒的 Promise 对象,用于在规定时间内没有获取到任何一个异步操作的结果时输出错误信息。我们使用 Promise.race() 方法来等待超时或者获取到任何一个异步操作的结果。如果在规定时间内没有获取到任何一个异步操作的结果,则会输出一个错误信息。如果获取到了任何一个异步操作的结果,则会将其输出到控制台。

通过使用 Promise.all()Promise.race() 方法,我们可以处理多个异步操作的结果,并在需要等待多个异步操作都完成后继续执行的场景中使用 Promise.all() 方法,以及在需要在多个异步操作中选择一个最快的结果的场景中使用 Promise.race() 方法。同时,我们还可以使用 Promise 对象的链式调用来处理多个异步操作的顺序和结果,避免了回调地狱的问题。

持续学习总结记录中,回顾一下上面的内容:
Promise解决了JavaScript中的异步编程问题。在传统的回调函数中,处理异步操作会导致代码嵌套过深,难以维护和理解。而Promise提供了一种更优雅的方式来处理异步操作。

Promise.all用于将多个Promise对象包装成一个新的Promise对象,当所有的Promise都成功时,返回一个包含所有Promise结果的数组;如果其中一个Promise失败,则返回该失败的原因。

Promise.race用于将多个Promise对象包装成一个新的Promise对象,当任意一个Promise完成(无论成功或失败)时,返回该Promise的结果。

使用场景上,Promise.all适合在需要等待多个异步操作全部完成后再进行下一步操作的情况,例如同时发送多个请求并等待它们全部返回结果后再更新页面。

而Promise.race适合在需要快速获取第一个完成的异步操作结果时使用,例如多个接口请求,只要有一个接口返回结果,就可以先展示给用户。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/467015.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE5 播放本地MP3、MP4

1.创建一个媒体播放器 2.如创建视频,勾选。 它会多一个媒体纹理给你 3.1 设置音频 在一个actor上添加“媒体音频组件” “音频媒体播放器”赋值给它 3.2播放音频 添加一个音频媒体播放器变量, 赋值 地址使用绝对地址 4.1设置视频 UI上创建一个imag…

图表自动化开篇

目录 前言: 使用 Canvas 或者 SVG 渲染 选择哪种渲染器 代码触发 ECharts 中组件的行为 前言: 图表自动化一直以来是自动化测试中的痛点,也是难点,痛点在于目前越来越多公司开始构建自己的BI报表平台但是没有合适的自动化测试…

[JavaWeb玩耍日记]Maven的安装与使用

目录 一.作用 二.安装 三.使用 2.对项目使用compile命令进行编译,看看新的文件会在哪里产生? 3.需要认识的命令 4.Maven对项目执行不同命令的生命周期特点? 5.如何导入工程外的Maven? 6.如何直观地查看Maven导入了哪些工程或哪些jar包…

蓝牙BLE学习-概述

1. 简介 1.1 蓝牙发展历程 蓝牙,直接来自于一位国王的名字--King Harald ‘Bluetooth Gromsson。这位国王因两件事留名于史,其一是在公园958年统一了丹麦和挪威,其二是在其死后,其牙齿呈现出暗蓝色的颜色,因而得名蓝牙…

团队配置管理规范浅见

在一段时间的工作过程中配置管理工作确实对我们的生产活动产生了巨大的工作量,现在就这个工作来进行梳理一下。 本文主要分为两部分: 1、借用软件系统分析师的配置管理部分内容来介绍配置管理的工作(原谅时间精力有限,原文基本已…

Centos7离线安装MySQL5.7

卸载mariadb rpm -e --nodeps mariadb-libs可以使用rpm -qa|grep mariadb命令检测是否卸载完成。 关闭selinux 将/etc/selinux/config文件中的SELINUX设置为disabled下载MySql的相关rpm包 打开https://dev.mysql.com/downloads/mysql/ 选择Red Hat Enterprise Linux / Oracle L…

【医学大模型 知识增强】SMedBERT:结构化语义知识 + 医学大模型 = 显著提升大模型医学文本挖掘性能

SMedBERT:结构化语义知识 医学大模型 显著提升医学文本挖掘任务性能 名词解释结构化语义知识预训练语言模型医学文本挖掘任务 提出背景具体步骤提及-邻居混合注意力机制实体嵌入增强实体描述增强三元组句子增强 提及-邻居上下文建模域内词汇权重学习领域自监督任务…

网络专栏目录

大家好我是苏麟 , 这是网络专栏目录 . 图解网络 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 图解网络目录 基础篇 基础篇 TCP/IP网络模型有几层? : TCP/IP网络模型 键入网址到页面显示,期间发生了什么? : 键入网址到页面显示,期间发生了什么 现阶…

MyBatis篇----第一篇

系列文章目录 文章目录 系列文章目录前言一、什么是 Mybatis?二、Mybaits 的优点三、MyBatis 框架的缺点前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一、什么…

传统推荐算法库使用--mahout初体验

文章目录 前言环境准备调用混合总结 前言 郑重声明:本博文做法仅限毕设糊弄老师使用,不建议生产环境使用!!! 老项目缝缝补补又是三年,本来是打算直接重写写个社区然后给毕设使用的。但是怎么说呢&#xff…

网络安全的今年:量子、生成人工智能以及 LLM 和密码

尽管世界总是难以预测,但网络安全的几个强劲趋势表明未来几个月的发展充满希望和令人担忧。有一点是肯定的:2024 年将是非常重要且有趣的一年。 近年来,人工智能(AI)以令人难以置信的速度发展,其在网络安全…

Pandas自定义函数的多面手应用(pipe、apply、map、applymap、agg)【第76篇—Pandas自定义函数】

Pandas自定义函数的多面手应用(pipe、apply、map、applymap、agg) Pandas是Python中用于数据分析和处理的强大库,提供了丰富的功能和灵活性。在实际数据处理中,经常会遇到需要自定义函数来进行特定的操作。本文将深入探讨Pandas中…