promise用法总结以及手写promise
JavaScript中的 Promise 是用于处理异步操作的对象,它代表了一个异步操作的最终完成(或失败)及其结果值。Promise 是异步编程的一种更简洁和更可读的方式,避免了回调地狱的问题。
- Promise 的基本概念
一个 Promise 是一个表示异步操作最终完成(或失败)并返回结果的对象。Promise 具有三种状态:
Pending(待定):初始状态,表示异步操作尚未完成。
Resolved/Fulfilled(已完成):操作成功完成,返回值。
Rejected(已拒绝):操作失败,返回错误信息。
2. Promise 构造函数
let promise = new Promise((resolve, reject) => {// 异步操作if (成功) {resolve(结果); // 操作成功,返回结果} else {reject(错误信息); // 操作失败,返回错误信息}
});
resolve(value):改变 Promise 状态为 fulfilled,并传递一个值。
reject(error):改变 Promise 状态为 rejected,并传递一个错误。
3. Promise 的状态转换
初始状态:pending
状态1:resolved,调用 resolve()。
状态2:rejected,调用 reject()。
4. Promise 的链式调用
Promise 支持链式调用,可以通过 .then()、.catch() 和 .finally() 来处理异步操作的结果。
4.1 then()
then() 用于定义成功和失败的回调函数。
promise.then((result) => {console.log('成功:', result);}).catch((error) => {console.error('失败:', error);});
then() 接受两个回调函数:
第一个回调函数用于处理成功的结果。
第二个回调函数用于处理失败的结果(可选)。
4.2 catch()
catch() 用于捕获并处理异常。通常与 then() 一起使用。
promise.then(result => {console.log(result);}).catch(error => {console.error(error);});
4.3 finally()
finally() 用于在 Promise 完成(无论是成功还是失败)后执行清理操作。
promise.then(result => {console.log('成功:', result);}).catch(error => {console.error('失败:', error);}).finally(() => {console.log('无论成功或失败,都执行');});
- Promise 的常见静态方法
5.1 Promise.resolve()
Promise.resolve() 返回一个已经解决的 Promise,其值是传入的参数。
let promise = Promise.resolve(42);
promise.then(value => {console.log(value); // 输出 42
});
5.3 Promise.all()
Promise.all() 接收一个 Promise 数组,返回一个新的 Promise,当所有的 Promise 都成功时,该 Promise 会成功,返回一个数组。只要有一个 Promise 失败,整个 Promise.all() 就会失败。
Promise.all([promise1, promise2, promise3]).then(results => {console.log(results); // 所有 promise 成功时的结果数组}).catch(error => {console.error(error); // 如果有一个失败,捕获错误});
5.4 Promise.allSettled()
Promise.allSettled() 接收一个 Promise 数组,返回一个新的 Promise,无论所有的 Promise 是成功还是失败,都会在所有 Promise 结束后返回。
Promise.allSettled([promise1, promise2]).then(results => {console.log(results); // 输出每个 promise 的状态(fulfilled/rejected)});
5.5 Promise.race()
Promise.race() 返回一个新的 Promise,它会在第一个 Promise 完成(无论是成功还是失败)时返回。
Promise.race([promise1, promise2]).then(result => {console.log(result); // 第一个完成的 promise 的结果}).catch(error => {console.error(error); // 第一个失败的 promise 错误});
5.6 Promise.any()
Promise.any() 返回一个新的 Promise,它会在第一个成功的 Promise 返回时成功。如果所有的 Promise 都失败,返回一个 AggregateError。
Promise.any([promise1, promise2]).then(result => {console.log(result); // 第一个成功的 promise 的结果}).catch(error => {console.error(error); // 如果所有 promise 都失败,捕获错误});
-
Promise 的手动实现
实现一个基本的 Promise 类:
class MyPromise {
constructor(executor) {
this.state = ‘pending’; // 初始状态
this.value = undefined; // 成功时的值
this.reason = undefined; // 失败时的原因this.onFulfilled = []; // 存储成功的回调
this.onRejected = []; // 存储失败的回调const resolve = (value) => {
if (this.state === ‘pending’) {
this.state = ‘fulfilled’;
this.value = value;
this.onFulfilled.forEach(fn => fn(value));
}
};const reject = (reason) => {
if (this.state === ‘pending’) {
this.state = ‘rejected’;
this.reason = reason;
this.onRejected.forEach(fn => fn(reason));
}
};executor(resolve, reject);
}
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state === ‘fulfilled’) {
const result = onFulfilled(this.value);
resolve(result);
} else if (this.state === ‘rejected’) {
const result = onRejected(this.reason);
reject(result);
} else {
this.onFulfilled.push(() => {
const result = onFulfilled(this.value);
resolve(result);
});
this.onRejected.push(() => {
const result = onRejected(this.reason);
reject(result);
});
}
});
}
}
相关文章:
promise用法总结以及手写promise
JavaScript中的 Promise 是用于处理异步操作的对象,它代表了一个异步操作的最终完成(或失败)及其结果值。Promise 是异步编程的一种更简洁和更可读的方式,避免了回调地狱的问题。 Promise 的基本概念 一个 Promise 是一个表示异步…...
春招项目=图床+ k8s 控制台(唬人专用)
1. 春招伊始 马上要春招了,一个大气的项目(冲击波项目)直观重要,虽然大家都说基础很重要,但是一个足够新颖的项目完全可以把你的简历添加一个足够闪亮的点。 这就不得不推荐下我的 k8s 图床了,去年折腾快…...
Android 11.0 系统settings添加ab分区ota升级功能实现二
1.概述 在11.0的系统rom定制化开发中,在进行系统ota升级的功能中,在10.0以前都是使用系统 RecoverySystem的接口实现升级的,现在可以实现AB分区模式来进行ota升级的,但是 必须需要系统支持ab分区升级的模式才可以的,接下来分析下看怎么样进行ota升级功能实现 2.系统sett…...
【Spring+MyBatis】_图书管理系统(上篇)
目录 1. MyBatis与MySQL配置 1.1 创建数据库及数据表 1.2 配置MyBatis与数据库 1.2.1 增加MyBatis与MySQL相关依赖 1.2.2 配置application.yml文件 1.3 增加数据表对应实体类 2. 功能1:用户登录 2.1 约定前后端交互接口 2.2 后端接口 2.3 前端页面 2.4 单…...
什么是3D视觉无序抓取?
3D视觉无序抓取是一种结合三维视觉技术、机器人控制与智能算法的工业自动化解决方案,旨在实现机器人对散乱、无序堆放的物体进行自主识别、定位和抓取的操作。其核心是通过3D视觉系统获取物体的三维空间信息,结合路径规划与避障算法,引导机械臂完成高精度抓取任务,无需依赖…...
【Java】理解字符串拼接与数值运算的优先级
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 💯前言💯代码分析1. 第一句输出2. 第二句输出3. 第三句输出 💯关键概念与深入分析1. 字符串拼接的优先级2. 运算符的优先级与结合性3. 字符串拼接与数值运算的结合 &…...
[250217] x-cmd 发布 v0.5.3:新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理
目录 X-CMD 发布 v0.5.3📃Changelog🧩 deepseek🧩 feishu|dingtalk📦 x-cmd✅ 升级指南 X-CMD 发布 v0.5.3 📃Changelog 🧩 deepseek 新增 deepseek 模块,用户可通过 deepseek 直接请求使用 …...
渗透利器:Burp Suite 联动 XRAY 图形化工具.(主动扫描+被动扫描)
Burp Suite 联动 XRAY 图形化工具.(主动扫描被动扫描) Burp Suite 和 Xray 联合使用,能够将 Burp 的强大流量拦截与修改功能,与 Xray 的高效漏洞检测能力相结合,实现更全面、高效的网络安全测试,同时提升漏…...
Linux、Docker与Redis核心知识点与常用命令速查手册
Linux、Docker与Redis核心知识点与常用命令速查手册 一、Linux基础核心 1. 核心概念 文件系统:采用树形结构,根目录为/权限机制:rwx(读/写/执行)权限,用户分为owner/group/others软件包管理: …...
DeepSeek HuggingFace 70B Llama 版本 (DeepSeek-R1-Distill-Llama-70B)
简简单单 Online zuozuo :本心、输入输出、结果 文章目录 DeepSeek HuggingFace 70B Llama 版本 (DeepSeek-R1-Distill-Llama-70B)前言vllm 方式在本地部署 DeepSeek-R1-Distill 模型SGLang 方式在本地部署 DeepSeek-R1-Distill 模型DeepSeek-R1 相关的 Models,以及 Huggin…...
Playwright入门之---命令
运行和调试测试 使用 Playwright,您可以运行单个测试、一组测试或所有测试。可以使用--project标志在一个或多个浏览器上运行测试。默认情况下,测试并行运行,并以无头方式运行,这意味着在运行测试时不会打开任何浏览器窗口&#…...
Java基于 SpringBoot+Vue的微信小程序跑腿平台V2.0(附源码,文档)
博主介绍:✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不…...
Fastapi + vue3 自动化测试平台(5)-- 封装树形结构列表生成器
使用FastAPI封装树形结构生成函数:高效处理层级数据 在Web开发中,树形结构是一种常见的数据组织形式,常用于菜单、分类、组织结构等场景。本文将介绍如何使用FastAPI封装一个通用的树形结构生成函数,支持动态选择字段,…...
【项目实战】日志管理和异步任务处理系统
这是一个高效的日志管理和异步任务处理系统,提供了多级别的日志记录、灵活的日志格式化和多种日志输出目标(控制台、文件、文件滚动)。通过异步任务循环器和线程安全的任务队列,系统能够在高并发环境下处理任务,同时避…...
CViewState::InitializeColumns函数分析之_hdsaColumnStates的结构
CViewState::InitializeColumns函数分析之_hdsaColumnStates的结构 // Set up saved column state only if the saved state // contains information other than "nothing". if (_hdsaColumnStates) { UINT cStates DSA_GetItemCount(_hdsaColumnS…...
WPF-数据转换器
一、单值转换器 1.不传参数 转换器 当Value值大于100时返回红色 public class DataConverter : IValueConverter{/// <summary>/// 表示从源到目标数据转换/// </summary>/// <param name"value">数据源的值</param>/// <param name&q…...
09 解决方案 - 开源机器人+具身智能+AI
开源机器人、具身智能(Embodied Intelligence)以及AI技术的结合,可以为机器人领域带来全新的解决方案。以下是这一结合的可能方向和具体方案: 1. 开源机器人平台 开源机器人平台为开发者提供了灵活的基础架构,可以在此基础上结合具身智能和AI技术。以下是一些常用的开源机…...
2025 BabitMF 第一期开源有奖活动正式开启 !
为了促进开源社区的交流与成长,字节跳动开源的多媒体处理框架 BabitMF (GitHub - BabitMF/bmf: Cross-platform, customizable multimedia/video processing framework. With strong GPU acceleration, heterogeneous design, multi-language support, e…...
项目管理十大领域是哪些
项目管理的十大领域包括:整合管理、范围管理、时间管理、成本管理、质量管理、人力资源管理、沟通管理、风险管理、采购管理、干系人管理。这些领域构成了一个完整的项目管理框架,每个领域都扮演着至关重要的角色,帮助项目经理有效管理项目的…...
期权帮|股指期货的有效止盈止损策略?
锦鲤三三每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 股指期货的有效止盈止损策略? 一、股指期货止盈策略 (1)固定比例止盈:设定盈利百分比目标,达则止盈。优点:简单&am…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
