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…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...

C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...

Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...