前端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.mfbz.cn/a/384731.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何学习VBA_3.2.14:VBA中字符串的处理和判断函数

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的劳动效率,而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册,现在已经全部完成,希望大家利用、学习。 如果…

EasyCaptcha,开源图形验证码新标杆!

引言: 随着互联网的普及,验证码已成为网站和应用程序中不可或缺的安全组件。它能够有效地防止自动化攻击、垃圾邮件和机器人活动。在众多验证码解决方案中,Easy-captcha以其简单易用和高度可定制的特点受到了开发者的青睐。本文将指导读者如…

leetcode:买卖股票最佳时机二

思路: 使用贪心算法:局部最优是将买卖过程中产生的正数进行相加,进而使得最后结果最大(全局最优)。 price [7,1,5,10,3,6,4] -6,4,5,-7,3,-2 正数相加就得到了最大 代码实现: 1.循环中下标从1开始 …

unity2017 遇到visual studio 2017(社区版) 30日试用期到了

安装unity2017 遇到visual studio 2017 30日试用期到了,网上百度搜了好多方法都没有成功。 最后用了这个方法: 1)启动vs2017,在弹出要登录的窗口之前,迅速的点击工具-》选项-》账户,勾选在添加账户或对账户重新进行身…

【技巧】Allegro实用技巧之模块复用

需求分析:使用Allegro软件进行PCB Layout设计时,当电路图中有很多路相同的模块,使用模块复用的的操作方法,可以显著提高工作效率,同时也可以使PCB布局在整体上显得美观。下面来讲述这个方法。 具体方法及说明&#xf…

计算机组成原理 1 概论

主要内容 介绍运算器、控制器、存储器结构、工作原理、设计方法及互连构成整机的技术。 主要内容: ◼ 数值表示与运算方法 ◼ 运算器的功能、组成和基本运行原理 ◼ 存储器及层次存储系统 ◼ 指令系统 ◼ CPU功能、组成和运行原理 ◼ 流水线 ◼ 系统总线 ◼ 输入输出…

【蓝桥杯选拔赛真题34】C++最大值 第十三届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C最大值 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、推荐资料 C/C最大值 第十三届蓝桥杯青少年创意编程大赛C选拔赛真题 一、题目要求 1、编程实现(C) 给定一个…

C# WinFrom+AspNetCore WebApi实现大文件下载与上传

客户端UI: 服务端WebApi: 客户端代码&#xff1a; App.config&#xff1a; <?xml version"1.0" encoding"utf-8" ?> <configuration><appSettings><add key"WebApi" value"https://localhost:7285"/><…

Days 29 ElfBoard LCD屏双电荷泵电路原理

7寸LCD屏幕的屏幕排线中采用的供电电压是5V供电&#xff0c;但是在屏幕工作时需要VCOM-5.3V、AVDD-12.5V、VGL--7V、VGH-17V几组电压&#xff0c;所以要对初始的5V电源进行DC-DC电压变换&#xff0c;在这里我们用到了双电荷泵电路。 再此电路中VCC_5V为电源输入&#xff0c;E…

2024年2月5日-2月11日周报

论文阅读 1. 本周计划2. 完成情况2.1 论文摘要2.2 网络结构2.3 损失函数2.4 优化器2.5 代码2.5.1 代码结果2.5.2 代码大致流程 4. 总结及收获4. 下周计划 1. 本周计划 阅读论文《Data-Driven Seismic Waveform Inversion: A Study on the Robustness and Generalization》并实…

嵌入式Qt 第一个Qt项目

一.创建Qt项目 打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项 弹出New Project对话框&#xff0c;选择Qt Widgets Application 选择【Choose】按钮&#xff0c;弹出如下对话框 设置项目名称和路径&#xff0c;按照向导进行下一步 选…

vue3中Pinia

一、pinia的简单使用 vuex和pinia的区别 参考网址&#xff1a;[Vuex] Vuex 5 by kiaking Pull Request #271 vuejs/rfcs GitHub 1.pinia没有mutations&#xff0c;只有&#xff1a;state、getters、actions 2.pinia分模块不需要models&#xff08;之前vuex分模块需要models…

肿瘤微环境异质性对治疗反应的影响(综述)

Influence of tumour micro-environment heterogeneity on therapeutic response | Nature 肿瘤的形成涉及肿瘤细胞与细胞外基质、肿瘤血管和免疫细胞的共同进化。肿瘤的成功生长和最终转移并不完全取决于肿瘤细胞的基因改变&#xff0c;还取决于这种突变在特定环境中带来的适…

【Java程序设计】【C00270】基于Springboot的moba类游戏攻略分享平台(有论文)

基于Springboot的moba类游戏攻略分享平台&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的游戏攻略分享平台 本系统分为系统功能模块、管理员功能模块、以及用户后台功能模块。 系统功能模块&#xff1a;在平台首…

算法-3-基本的数据结构

单双链表 1.单链表双链表如何反转 import java.util.ArrayList; import java.util.List;public class Code01_ReverseList {public static class Node {public int value;public Node next;public Node(int data) {value data;}}public static class DoubleNode {public int…

ZigBee学习——BDB

✨本博客参考了善学坊的教程&#xff0c;并总结了在实现过程中遇到的问题。 善学坊官网 文章目录 一、BDB简介二、BDB Commissioning Modes2.1 Network Steering2.2 Network Formation2.3 Finding and Binding&#xff08;F & B&#xff09;2.4 Touchlink 三、BDB Commissi…

图像处理之《黑盒扰动的可逆噪声流鲁棒水印》论文阅读

一、文章摘要 近年来&#xff0c;基于深度学习的数字水印框架得到了广泛的研究。现有的方法大多采用基于“编码器-噪声层-解码器”的架构&#xff0c;其中嵌入和提取过程分别由编码器和解码器完成。然而&#xff0c;这种框架的一个潜在缺点是编码器和解码器可能不能很好地耦合…

linux系统下vscode portable版本的python环境搭建003:venv

这里写自定义目录标题 python安装方案一. 使用源码安装&#xff08;有[构建工具](https://blog.csdn.net/ResumeProject/article/details/136095629)的情况下&#xff09;方案二.使用系统包管理器 虚拟环境安装TESTCG 本文目的&#xff1a;希望在获得一个新的系统之后&#xff…

电路设计(15)——篮球赛24秒违例倒计时报警器的proteus仿真

1.设计要求 设计、制作一个篮球赛24秒违例倒计时报警器。要求&#xff1a; &#xff08;1&#xff09;具有倒计时功能。可完整实现从“24”秒开始依序倒计时并显示倒计时过程&#xff0c;显示时间间隔为1秒。 &#xff08;2&#xff09;具有消隐功能。当“24”秒倒计时…
最新文章