前端 Promise 全面深入解析

一、Promise基础概念

1、什么是Promise?
Promise是一个表示异步操作最终完成或失败的对象。它允许你为异步操作的成功结果和失败原因分别绑定相应的处理方法。
2、Promise的三种状态
请添加图片描述

  • pending(等待中): 初始状态,既不是成功,也不是失败
  • fulfilled(已成功): 操作成功完成
  • rejected(已拒绝): 操作失败

状态一旦改变就不可逆:pending → fulfilled 或 pending → rejected

3、创建Promise

const myPromise = new Promise((resolve, reject) => {// 异步操作setTimeout(() => {const success = Math.random() > 0.3;if(success) {resolve("操作成功!");  // 将状态改为 fulfilled} else {rejected("操作失败!");  // 将状态改为 rejected}}, 1000);
});

二、Promise的基本使用

1、处理Promise结果

myPromise.then(result => {console.log("成功", result);}).catch(error => {console.log("失败",  error);	}).finally(() => {console.log("无论成功还是失败都会执行");});

2、Promise链式调用

function asyncOperation(value) {return new Promise((resolve, reject) => {setTimeout(() => {if (value > 0.5) {resolve(value * 100);} else {reject("值太小");}}, 1000);});
}asyncOperation(0.8).then(result => {console.log("第一步结果:", result);return asyncOperation(result / 200); // 返回新 Promise}).then(result => {console.log("第二步结果:", result);return "最终结果: " + result; // 返回普通值}).then(result => {console.log(result);}).catch(error => {console.error("链中任何一步出错:", error);});

三、Promise的静态方法

1、Promise.all()
等待所有Promise完成,或任何一个Promise失败

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
const promise3 = fetch('https://api.example.com/data');Promise.all([promise1, promise2, promise3]).then(values => {console.log(values);  // [3, 'foo', Response]}).catch(error => {console.error('有一个Promise失败:', error);	})

2、Promise.race()
返回最先完成或拒绝的Promise的结果

const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject('超时'), 5000)
);const fetchPromise = fetch('https://api.example.com/slow-data');Promise.race([fetchPromise, timeoutPromise]).then(response => {console.log('数据获取成功');	}).catch(error => {console.error('请求超时或失败:', error);});

3、Promise.allSettled()
等待所有Promise完成(无论成功或失败)

const promises = [Promise.resolve('成功'),Promise.reject('失败'),Promise.resolve('另一个成功')
];Promise.allSettled(promises).then(results => {results.forEach((result, index) => {if (result.status === 'fulfilled') {console.log(`Promise 

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

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

相关文章

【LIN】2.LIN总线通信机制深度解析:主从架构、五种帧类型与动态调度策略

参考文章: Lin总线通信在STM32作为主机代码以及从机程序 基于STM32的LIN总线的实现 STM32F0-LIN总线通讯程序代码 主从调试OK LIN协议通信DEMO及源码剖析 前文已讲解关于LIN帧代码如何实现:【LIN】1.LIN通信实战:帧收发全流程代码实现 帧类型…

Maven的概念与Maven项目的创建

MavenMaven的概念依赖管理项目构建Maven安装Maven项目的创建Maven的第一个项目Maven的第二个项目Maven的概念 Maven 是 Apache 基金会推出的跨平台的项目管理工具,主要服务于基于Java平台的项目构建、依赖管理和项目信息管理,目前是 Java 生态中最主流的…

Mysql之binlog日志说明及利用binlog日志恢复数据操作记录

众所周知,binlog日志对于mysql数据库来说是十分重要的。在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全备份+binlog日志恢复增量数据部分),化险为夷! 废话不多说,下面是梳理的binlog日志操作解说: 一、初步了解binlog MySQL的二进制日志…

windows安装Elasticsearch,ik分词器,kibana可视化工具

安装地址 elasticsearch安装地址: Past Releases of Elastic Stack Software | Elastic 分词器下载地址: https://github.com/infinilabs/analysis-ik?tabreadme-ov-file kibana下载地址: Past Releases of Elastic Stack Software | Elastic 注意:版本一定要统…

GaussDB 数据库架构师修炼(十八)SQL引擎-SQL执行流程

1 SQL执行流程查询解析:词法分析、语法分析、 语义分析 查询重写:视图和规则展开、基于规则的查询优化 计划生成:路径搜索和枚举、选出最优执行计划 查询执行:基于优化器生成的物理执行计划对数据进行获取和计算2 解析器和优化器S…

能源管理系统中的物联网数据采集:深度探索与操作指南

一、引言物联网(Internet of Things, IoT)作为数字化时代的核心基础设施,通过将物理世界的设备、物体与网络连接,实现数据的实时感知与交互。而数据采集作为物联网系统的 “神经末梢”,是整个体系运行的基础。本文将从…

Java实现一个简单的LRU缓存对象

LRU(Least Recently Used)算法的核心思想是:最近使用的数据将被保留,最久未使用的数据将被淘汰。这种策略适用于内存有限、但又需要高频访问的数据场景,比如缓存系统、页面置换算法等。mysql的缓冲池就是使用的LUR Inn…

整体设计 之定稿 “凝聚式中心点”原型 --整除:智能合约和DBMS的在表层挂接 能/所 依据的深层套接 之2

摘要三“式”三“心”三“物” 整数原型三段式表达 的 凝聚式中心点dot 、组织式核心元素位element和分析式内核基因座locus 三者分别以**“等号线(Arc)”**(动态关联)、**“边界线(Transition)”**&#…

vue.根据url生成二维码

文章目录概要QR码步骤1. 引入库2. 生成二维码3. 将二维码加入页面中用javascript库简化二维码生成1. 引入库2. 使用库生成二维码二维码美化和定制1. 调整大小2. 调整颜色3. 添加自定义形状和图案4. 添加logo性能优化与错误处理1. 减少不必要的计算2. 异步处理概要 生成 URL 二…

WPF+MVVM入门学习

最近在学WPF的MVVM,有两种方式实现,一种是自己实现,一种是借助MVVM框架,接下来通过一个医院自助打印报告机键盘输入界面来演示自己实现、框架CommunityToolkit和Prism的区别。 项目源码:https://gitee.com/cplmlm/Sel…

[e3nn] docs | 不可约表示(Irreps)

链接:https://docs.e3nn.org/en/latest/examples/examples.html docs:e3nn e3nn是一个用于构建欧几里得(E(3))等变神经网络的Python库,这意味着它们能自动保持三维旋转和反射的对称性。 该库使用不可约表示(Irreps)来描述数据变换方式&…

深入浅出 ArrayList:从基础用法到底层原理的全面解析(中)

四、ArrayList 常用方法实战 —— 从添加到遍历的全场景覆盖ArrayList 提供了数十个方法,但日常开发中常用的只有 10 个左右,我们按 “元素操作”“集合查询”“遍历方式” 三类来梳理,每个方法都附带示例和注意事项。4.1 元素添加&#xff1…

java后端如何实现下载功能

后端需要把要下载的若干文件 按 ZIP 格式编码成一段二进制字节流,然后以 Content-Type: application/zip Content-Disposition: attachment; filenamexxx.zip 的形式写进 HTTP 响应体。浏览器收到这段“ZIP 格式的字节流”后,就会弹出保存对话框&#xf…

AI生成技术报告:GaussDB与openGauss的HTAP功能全面对比

GaussDB 与 openGauss 的 HTAP 功能比较 前言 GaussDB集中式版本从505.2版本开始引入了HTAP混合负载功能,openGauss也从7.0.0 RC1版本开始引入了HTAP行列融合功能,加强了行存转列存的使用友好度,但两者的实现似乎存在不小的差异。 虽然文档…

小程序开发指南(四)(UI 框架整合)

✍讲解了微信小程序 UI 框架的使用方法和特点,根据项目需求选择合适的组件库。附有相应的组件库预览码,也是将所有的微信小程序原生组件库整合在一起方便后续开发的使用。如果有不好或者有错误的地方请告知!希望可以与大家相互的交流学习&…

golang 1.25.0 安装

wget https://golang.google.cn/dl/go1.25.0.linux-amd64.tar.gz tar -C /usr/local/ -xzf go1.25.0.linux-amd64.tar.gz ln -s /usr/local/go/bin/* /usr/bin/ go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct

基于深度学习的人脸表情识别系统:YOLOv5/v6/v7/v8/v10模型实现与UI界面集成

基于YOLOv5/v7/v8的智能人脸表情识别系统:从算法原理到应用实现 表情识别的技术价值与挑战 人脸表情识别(Facial Expression Recognition, FERYOLOv5/v7/v8等深度学习算法构建高效的表情识别系统,并设计直观的UI界面集成方案。无论你是深度学习初学者还是有经验的开发者,…

初步了解多线程

系列文章目录 目录 系列文章目录 前言 一、进程 二、线程 1. 线程解决资源开销的方式 2. 线程和进程的联系和区别 三、多线程编程 1. 直观了解多线程 2. 线程的创建方式 1. 继承 Thread 重写 run() 方法 2. 实现 Runable 接口,重写 run() 方法 3. 继承 …

安卓Android低功耗蓝牙BLE连接异常报错133

安卓Android低功耗蓝牙BLE连接异常报错133 之前连接一直好好的,不知道为什么今天突然就连接不了蓝牙了,报错133,按照 找网上的说明总是说清除GATT缓存,其实并不是我的问题,最后看到这里https://softs.im/android-ble-%e8%bf%9e%e6%8e%a5%e9%94%99%e8%af%af133/ 有如下说明: 情…