19-简单理解JavaScript中的Promise:手写Promise实现
笔记+分享
在现代JavaScript开发中,异步编程是不可避免的一部分。为了更好地处理异步操作,ES6引入了Promise。Promise使得异步代码更具可读性和可维护性。通过手写一个完整的Promise实现,可以帮助你更深入地理解其工作原理。本文将详细介绍Promise的概念、用法及其在实际开发中的应用,并提供一个手写的Promise实现。
什么是Promise?
Promise是JavaScript中的一种对象,用于表示一个异步操作的最终完成(或失败)及其结果值。它有三种状态:
- Pending(待定):初始状态,既没有被兑现,也没有被拒绝。
- Fulfilled(已兑现):操作成功完成,并返回一个值。
- Rejected(已拒绝):操作失败,并返回一个原因。
手写Promise实现
我们将通过构建一个简化版的Promise实现来更好地理解其工作原理。
class MyPromise {constructor(executor) {this.state = 'pending'; // 初始状态this.value = undefined; // 成功时的值this.reason = undefined; // 失败时的原因this.onFulfilledCallbacks = []; // 成功的回调函数数组this.onRejectedCallbacks = []; // 失败的回调函数数组const resolve = (value) => {if (this.state === 'pending') {this.state = 'fulfilled';this.value = value;this.onFulfilledCallbacks.forEach(fn => fn());}};const reject = (reason) => {if (this.state === 'pending') {this.state = 'rejected';this.reason = reason;this.onRejectedCallbacks.forEach(fn => fn());}};try {executor(resolve, reject);} catch (error) {reject(error);}}then(onFulfilled, onRejected) {onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };let promise2 = new MyPromise((resolve, reject) => {if (this.state === 'fulfilled') {setTimeout(() => {try {let x = onFulfilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}if (this.state === 'rejected') {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}if (this.state === 'pending') {this.onFulfilledCallbacks.push(() => {setTimeout(() => {try {let x = onFulfilled(this.value);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);});this.onRejectedCallbacks.push(() => {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);});}});return promise2;}catch(onRejected) {return this.then(null, onRejected);}static resolve(value) {return new MyPromise((resolve, reject) => {resolve(value);});}static reject(reason) {return new MyPromise((resolve, reject) => {reject(reason);});}static all(promises) {return new MyPromise((resolve, reject) => {let results = [];let completed = 0;const processResult = (index, value) => {results[index] = value;if (++completed === promises.length) {resolve(results);}};promises.forEach((promise, index) => {MyPromise.resolve(promise).then(value => {processResult(index, value);}, reject);});});}static race(promises) {return new MyPromise((resolve, reject) => {promises.forEach(promise => {MyPromise.resolve(promise).then(resolve, reject);});});}
}function resolvePromise(promise2, x, resolve, reject) {if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise'));}let called = false;if (x && (typeof x === 'object' || typeof x === 'function')) {try {let then = x.then;if (typeof then === 'function') {then.call(x, y => {if (called) return;called = true;resolvePromise(promise2, y, resolve, reject);}, reason => {if (called) return;called = true;reject(reason);});} else {resolve(x);}} catch (error) {if (called) return;called = true;reject(error);}} else {resolve(x);}
}
关键点解释
- 状态管理:Promise有三种状态:
pending、fulfilled和rejected。通过state变量来管理当前Promise的状态。 - 回调队列:使用两个数组
onFulfilledCallbacks和onRejectedCallbacks来存储在pending状态时注册的回调函数。 - resolve和reject:
resolve函数将Promise状态从pending变为fulfilled,并执行所有成功回调;reject函数将Promise状态从pending变为rejected,并执行所有失败回调。 - then方法:
then方法返回一个新的Promise,并根据当前Promise的状态决定如何处理回调函数。 - resolvePromise函数:这个函数用来处理
then方法中的链式调用,确保Promise的规范执行,防止循环引用等问题。
用法示例
const p1 = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('成功');}, 1000);
});p1.then(value => {console.log(value); // 输出 "成功"return new MyPromise((resolve, reject) => {setTimeout(() => {resolve('链式调用成功');}, 1000);});
}).then(value => {console.log(value); // 输出 "链式调用成功"
}).catch(error => {console.error(error);
});
通过这个手写的Promise实现,你可以更好地理解Promise的内部工作机制,并在实际开发中灵活运用Promise来处理异步操作。希望这篇博客能帮助你深入理解JavaScript中的Promise。
相关文章:
19-简单理解JavaScript中的Promise:手写Promise实现
笔记分享 在现代JavaScript开发中,异步编程是不可避免的一部分。为了更好地处理异步操作,ES6引入了Promise。Promise使得异步代码更具可读性和可维护性。通过手写一个完整的Promise实现,可以帮助你更深入地理解其工作原理。本文将详细介绍Pr…...
elementUI input 禁止内容两端存在空格,或者是自动去除两端空格
需求 项目中有需求:输入框中禁止内容两端存在空格,或者是自动去除两端空格。 解决方法 vue的api文档中有过介绍,使用.trim可以去掉用户输入内容中两端的空格,如下图 代码 <el-input v-model.trim"name" cleara…...
Go语言24小时极速学习教程(一)基础语法
Go语言(也称为Golang)是一种由Google开发的编程语言,以其简洁、高效和并发支持而闻名。从本文开始,将带你快速完成Go语言的学习,如果你之前有过Java或者C语言的基础,学习它将很容易,本教程忽略环…...
LLMs之Code:Qwen2.5-Coder的简介、安装和使用方法、案例应用之详细攻略
LLMs之Code:Qwen2.5-Coder的简介、安装和使用方法、案例应用之详细攻略 导读:这篇论文介绍了Qwen2.5-Coder系列模型,这是一个针对代码生成的强大开源大型语言模型。 >> 背景痛点:现有代码大型语言模型的不足:虽然…...
pytest结合allure做接口自动化
这是一个采用pytest框架,结合allure完成接口自动化测试的项目,最后采用allure生成直观美观的测试报告,由于添加了allure的特性,使得测试报告覆盖的内容更全面和阅读起来更方便。 1. 使用pytest构建测试框架,首先配置好…...
TypeScript简介:TypeScript是JavaScript的一个超集
官方描述:TypeScript 是 JavaScript 的一个超集 GitHub官网:https://github.com/Microsoft/TypeScript TypeScript is a superset of JavaScript that compiles to clean JavaScript output. TypeScript 是 JavaScript 的一个超集,支持 EC…...
【循环测试试题2】小X与三次方
题目描述 卡卡西要过 10 岁生日啦!今年,她特别想要一份与众不同的礼物,那就是一条能在阳光下发出五光十色耀眼光芒的水晶项链。她把这个想法告诉了妈妈。妈妈对卡卡西神秘的一笑,透露道:“邻居芭比阿姨家有个后花园。…...
【Python · PyTorch】卷积神经网络(基础概念)
【Python PyTorch】卷积神经网络 CNN(基础概念) 0. 生物学相似性1. 概念1.1 定义1.2 优势1.2.1 权重共享1.2.2 局部连接1.2.3 层次结构 1.3 结构1.4 数据预处理1.4.1 标签编码① One-Hot编码 / 独热编码② Word Embedding / 词嵌入 1.4.2 归一化① Min-…...
深入描述dts和dtsi的区别
QA:dts和dtsi的区别 在嵌入式 Linux 系统中,DTS(Device Tree Source)和 DTSI(Device Tree Source Include)是描述硬件设备树的文件格式。它们本质上是同一种语法的文件,但在使用上有一定区别。…...
京准时钟:一种北斗卫星校时器的结构设计
京准时钟:一种北斗卫星校时器的结构设计 京准时钟:一种北斗卫星校时器的结构设计 1、有关时间的一些基本概念: 时间与频率之间互为倒数关系,两者密不可分,时间标准的基础是频率标准,由晶体振荡器决定时间…...
【WiFi】ubuntu20.4 WiFi6 无线抓包环境搭建及使用
环境说明 笔记本电脑,无线网卡AX200,安装ubuntu20.04 安装无线网卡工具aircrack-ng sudo apt-get install aircrack-ng 安装wireshark sudo add-apt-repository ppa:wireshark-dev/stable sudo apt update sudo apt -y install wireshark sudo apt -…...
《Java核心技术 卷I》用户界面AWT事件继承层次
AWT事件继承层次 EventObject类有一个子类AWTEvent,它是所有AWT事件类的父类。 Swing组件会生成更多其他事件对象,都直接拓展自EventObject而不是AWTEvent。 AWT将事件分为底层(low-level)事件和语义事件。 语义事件:表示用户的动作事件&…...
蓝牙 HFP 协议详解及 Android 实现
文章目录 前言一、什么是蓝牙 HFP 协议?HFP 的核心功能HFP 的核心功能HFP 在 Android 中的典型应用场景 二、HFP 协议的工作流程HFP 的连接流程 三、HFP 在 Android 的实现1. 检查蓝牙适配器状态2. 发现并检测支持 HFP 的设备3. 获取 BluetoothHeadset 服务4. 连接设…...
sqli-labs靶场17-20关(每日四关)持续更新!!!
Less-17 打开靶场,发现页面比之前多了一行字 翻译过来就是,密码重置,大家肯定会想到,自己平时在日常生活中怎么密码重置,肯定是输入自己的用户名,输入旧密码,输入新密码就可以了,但…...
动态规划-完全背包问题——518.零钱兑换II
1.题目解析 建议先看 322.零钱兑换可以 更加轻松的理解本题 题目来源 518.零钱兑换——力扣 测试用例 2.算法原理 1.状态表示 本题要求返回所有情况,所以dp值就代表所有的方法数,即 dp[i][j]:在[1,i]个硬币中选择不同面值的硬币,…...
[模板总结] - 单向链表LinkedList操作
题目汇总 Leetcode 21, 82, 160, 206, 237, 268 Leetcode 21. 合并两个有序链表 归并排序的思路,创建一个哨兵节点从两个链表中按大小插入即可。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(…...
fastadmin多个表crud连表操作步骤
1、crud命令 php think crud -t xq_user_credential -u 1 -c credential -i voucher_type,nickname,user_id,voucher_url,status,time --forcetrue2、修改控制器controller文件 <?phpnamespace app\admin\controller;use app\common\controller\Backend;/*** 凭证信息…...
山西省网络建设与运维第十八届职业院校技能大赛(样题)
集团计划把部分业务由原有的 X86 架构服务器 上迁移到 ARM 架构服务器上,同时根据目前的部分业务需求进行了部分 调整和优化。 一、 X86 架构计算机安装与管理 1、PC1系统为 ubuntu-desktop-amd64 系统,登录用户为 xiao,密码为 Key-1122。在对…...
服务端高并发分布式结构进阶之路
序言 在技术求知的旅途中,鉴于多数读者缺乏在中大型系统实践中的亲身体验,难以从宏观角度把握某些概念,因此,本文特选取“电子商务应用”作为实例,详细阐述从百级至千万级并发场景下服务端架构的逐步演变历程。同时&am…...
分布式微服务项目,同一个controller不同方法间的转发导致cookie丢失,报错null pointer异常
源码: /***添加商品进入购物车*/ GetMapping("/addToCart") public String addToCart(RequestParam("num") Integer num, RequestParam("skuId") Long skuId, RedirectAttributes redirectAttributes) {System.out.println("nu…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
