当前位置: 首页 > news >正文

promise用法总结以及手写promise

JavaScript中的 Promise 是用于处理异步操作的对象,它代表了一个异步操作的最终完成(或失败)及其结果值。Promise 是异步编程的一种更简洁和更可读的方式,避免了回调地狱的问题。

  1. 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('无论成功或失败,都执行');});
  1. 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 都失败,捕获错误});
  1. 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封装一个通用的树形结构生成函数,支持动态选择字段&#xff0c…...

【项目实战】日志管理和异步任务处理系统

这是一个高效的日志管理和异步任务处理系统,提供了多级别的日志记录、灵活的日志格式化和多种日志输出目标(控制台、文件、文件滚动)。通过异步任务循环器和线程安全的任务队列,系统能够在高并发环境下处理任务,同时避…...

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 第一期开源有奖活动正式开启 !

为了促进开源社区的交流与成长&#xff0c;字节跳动开源的多媒体处理框架 BabitMF &#xff08;GitHub - BabitMF/bmf: Cross-platform, customizable multimedia/video processing framework. With strong GPU acceleration, heterogeneous design, multi-language support, e…...

项目管理十大领域是哪些

项目管理的十大领域包括&#xff1a;整合管理、范围管理、时间管理、成本管理、质量管理、人力资源管理、沟通管理、风险管理、采购管理、干系人管理。这些领域构成了一个完整的项目管理框架&#xff0c;每个领域都扮演着至关重要的角色&#xff0c;帮助项目经理有效管理项目的…...

期权帮|股指期货的有效止盈止损策略?

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货的有效止盈止损策略? 一、股指期货止盈策略 &#xff08;1&#xff09;固定比例止盈&#xff1a;设定盈利百分比目标&#xff0c;达则止盈。优点&#xff1a;简单&am…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...