手写一个符合Promises/A+规范的Promise_javascript进阶

答案:文章实现了一个符合Promises/A+规范的简易Promise,包含三种状态(pending、fulfilled、rejected)、构造函数、then方法链式调用、resolvePromise解析逻辑及静态resolve/reject方法,通过queueMicrotask处理异步回调,支持Promise链式传递与错误捕获。

手写一个符合promises/a+规范的promise_javascript进阶

实现一个符合 Promises/A+ 规范的 Promise 并不是一件简单的事,但通过一步步拆解核心逻辑,我们可以手写一个基本符合规范的简易版本。下面是一个简化但关键流程正确的 Promise 实现,帮助你深入理解其工作机制。

Promise 的三种状态

根据 Promises/A+ 规范,Promise 有三种状态:

pending:初始状态,未 fulfilled 或 rejected fulfilled:成功状态,不可逆 rejected:失败状态,不可逆

状态一旦从 pending 变为 fulfilled 或 rejected,就不能再改变。

Promise 构造函数实现

我们从构造函数开始,接收一个执行器函数(executor),并初始化状态和值。

立即学习“Java免费学习笔记(深入)”;

function MyPromise(executor) {  this.status = 'pending';  this.value = undefined;  this.reason = undefined;  // 存储 then 注册的成功和失败回调  this.onFulfilledCallbacks = [];  this.onRejectedCallbacks = [];  const resolve = (value) => {    if (this.status === 'pending') {      this.status = 'fulfilled';      this.value = value;      // 执行所有成功的回调      this.onFulfilledCallbacks.forEach(fn => fn());    }  };  const reject = (reason) => {    if (this.status === 'pending') {      this.status = 'rejected';      this.reason = reason;      // 执行所有失败的回调      this.onRejectedCallbacks.forEach(fn => fn());    }  };  try {    executor(resolve, reject);  } catch (error) {    reject(error); // 如果执行器出错,直接 reject  }}

then 方法的实现

then 方法是 Promise 的核心,用于注册成功和失败的回调,并返回一个新的 Promise,支持链式调用。

MyPromise.prototype.then = function(onFulfilled, onRejected) {  // 处理回调可选的情况  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val;  onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };  // 返回一个新的 Promise  const promise2 = new MyPromise((resolve, reject) => {    if (this.status === 'fulfilled') {      queueMicrotask(() => {        try {          const x = onFulfilled(this.value);          resolvePromise(promise2, x, resolve, reject);        } catch (e) {          reject(e);        }      });    }    if (this.status === 'rejected') {      queueMicrotask(() => {        try {          const x = onRejected(this.reason);          resolvePromise(promise2, x, resolve, reject);        } catch (e) {          reject(e);        }      });    }    // 如果还是 pending,先缓存回调函数    if (this.status === 'pending') {      this.onFulfilledCallbacks.push(() => {        queueMicrotask(() => {          try {            const x = onFulfilled(this.value);            resolvePromise(promise2, x, resolve, reject);          } catch (e) {            reject(e);          }        });      });      this.onRejectedCallbacks.push(() => {        queueMicrotask(() => {          try {            const x = onRejected(this.reason);            resolvePromise(promise2, x, resolve, reject);          } catch (e) {            reject(e);          }        });      });    }  });  return promise2;};

resolvePromise 辅助函数

这个函数处理 x 的情况,判断它是否是 Promise,决定如何解析并 resolve 或 reject promise2。

function resolvePromise(promise2, x, resolve, reject) {  if (promise2 === x) {    return reject(new TypeError('Chaining cycle detected for promise'));  }  let called = false; // 防止多次调用 resolve/reject  if (x != null && (typeof x === 'object' || typeof x === 'function')) {    try {      const then = x.then;      if (typeof then === 'function') {        // 认为是 Promise 类型        then.call(          x,          y => {            if (called) return;            called = true;            resolvePromise(promise2, y, resolve, reject);          },          r => {            if (called) return;            called = true;            reject(r);          }        );      } else {        // 普通对象        resolve(x);      }    } catch (e) {      if (called) return;      called = true;      reject(e);    }  } else {    // 基本类型值    resolve(x);  }}

静态方法:resolve 和 reject

提供快捷方式创建已解决或已拒绝的 Promise。

MyPromise.resolve = function(value) {  return new MyPromise((resolve) => resolve(value));};MyPromise.reject = function(reason) {  return new MyPromise((resolve, reject) => reject(reason));};

使用示例

测试我们实现的 Promise:

new MyPromise((resolve, reject) => {  setTimeout(() => {    resolve('Hello');  }, 1000);}).then(value => {  console.log(value); // 1秒后输出 Hello  return value + ' World';}).then(value => {  console.log(value); // 输出 Hello World});

基本上就这些。这个实现覆盖了 Promises/A+ 的核心机制:状态管理、异步任务队列(使用 queueMicrotask)、then 的链式调用和 resolvePromise 的递归解析。虽然省略了一些边界检查和更复杂的兼容逻辑,但它能帮助你理解 Promise 背后的运行原理。

以上就是手写一个符合Promises/A+规范的Promise_javascript进阶的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1535194.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
在 Cypress 测试中创建和重用对象数据
上一篇 2025年12月21日 02:13:26
解决Svelte+Vite多组件部署中的全局变量冲突问题
下一篇 2025年12月21日 02:13:42

相关推荐

  • 如何使用Composer和phpgt/propfunc解决PHP属性访问和修改问题?

    可以通过以下地址学习 Composer:学习地址 在开发 php 项目时,我常常会遇到需要对对象属性进行访问和修改的问题。特别是在某些情况下,我们希望实现只读属性,或者需要对属性进行实时计算和验证。这些需求如果用传统的方式实现,可能会导致代码变得复杂且难以维护。 我遇到的具体问题是,需要在项目中实现…

    用户投稿 2026年8月30日
    000
  • yii2怎么显示错误提示

    在 Yii2 中,显示错误提示有两种主要方法。一种是使用 Yii::$app->errorHandler->exception(),在异常发生时自动捕获和显示错误。另一种是使用 $this->addError(),在模型验证失败时显示错误,并可以在视图中通过 $model->…

    2026年8月30日
    100
  • 上海交通大学与云从科技集团共建成立AI-X研究院

    上海交通大学与云从科技集团共建成立AI-X研究院上海交通大学与云从科技集团共建成立AI-X研究院上海交通大学与云从科技集团共建成立AI-X研究院上海交通大学与云从科技集团共建成立AI-X研究院

    上海交通大学携手云从科技共建ai-x研究院,推动中国ai自主可控技术发展 2025年2月23日,上海交通大学AI-X研究院正式揭牌。云从科技董事长周曦、上海交通大学副校长蒋兴浩等领导出席了在上海交通大学徐汇校区举行的揭牌仪式。仪式由上海交通大学人工智能学院党委书记杨一帆主持。 ☞☞☞AI 智能聊天,…

    2026年8月30日 用户投稿
    000
  • 如何解决Laravel项目中与Zendesk集成的问题?使用Composer可以轻松搞定!

    可以通过一下地址学习composer:学习地址 在开发一个 laravel 项目时,我面临的一个挑战是如何高效地将 zendesk 客服系统集成到应用中。zendesk 是一个强大的客户支持平台,但将其与 laravel 无缝集成却不是一件容易的事。我尝试了多种方法,但都遇到了各种问题,如认证失败、…

    用户投稿 2026年8月30日
    100
  • jqwik中在@Provide方法中使用@ForAll处理集合的正确姿势

    本文深入探讨了在jqwik中结合@forall注解与集合类型在@provide方法中使用的常见误区与正确实践。主要解决了cannotfindarbitraryexception异常,阐明了@domain注解的正确作用范围,并提供了一种更推荐的方式来生成包含自定义类型集合的arbitrary,避免了在…

    2026年8月30日
    000
  • 如何实现用户登录后才能下载文件

    本文介绍如何使用 PHP 和会话(Session)控制文件下载权限,确保只有登录用户才能下载指定文件。通过 PHP 脚本验证用户登录状态,并设置相应的 HTTP 头部信息,实现安全的文件下载。同时,建议将文件存储在 Web 根目录之外,以增强安全性。 实现原理 核心思想是放弃使用 .htaccess…

    2026年8月30日
    000
  • 如何用AI分析数据_使用ChatGPT进行数据分析与可视化

    如何用AI分析数据_使用ChatGPT进行数据分析与可视化如何用AI分析数据_使用ChatGPT进行数据分析与可视化如何用AI分析数据_使用ChatGPT进行数据分析与可视化如何用AI分析数据_使用ChatGPT进行数据分析与可视化

    答案:使用AI分析数据需将任务转化为自然语言指令,核心步骤包括数据准备、指令设计、结果解读与迭代优化。首先清洗数据并转为CSV/JSON格式,确保字段清晰;其次设计明确具体的指令,分步引导分析,如“计算各产品总销售额并排序”;然后通过人工核对或与其他工具对比验证结果准确性;ChatGPT可生成基础图…

    2026年8月30日 用户投稿
    000
  • 爆款和平替之后,华为极简全闪数据中心还要Pro+

    过去一年,全闪存市场出现了几款爆品,例如oceanstordorado 2000、oceanstordorado 2100、oceanprotectx3000、fusioncube1000v。部分爆品甚至越界平替了hdd(机械硬盘)产品。合作伙伴也受益其中,上海华讯、广州耀恒等公司的相关业绩,都增长…

    2026年8月30日
    200
  • 如何解决PHP中的文本编码问题?使用yethee/tiktoken库可以!

    可以通过以下地址学习Composer:学习地址 在处理文本编码时,尤其是与ai模型相关的应用中,常常会遇到各种编码问题。这些问题不仅会影响文本的正确性,还会降低程序的运行效率。最近,我在开发一个与openai模型集成的项目时,遇到了类似的问题。幸运的是,通过使用yethee/tiktoken库,我成…

    用户投稿 2026年8月30日
    100
  • 电脑没网怎么截图 多种离线截图方法

    电脑没网怎么截图 多种离线截图方法电脑没网怎么截图 多种离线截图方法电脑没网怎么截图 多种离线截图方法电脑没网怎么截图 多种离线截图方法

    在使用电脑时,我们经常需要通过截图来保留界面内容、记录问题或分享信息。当网络中断时,许多依赖在线服务的截图工具可能无法使用,令人感到不便。但实际上,即便在无网络环境下,依然有多种方式可以顺利完成截图操作。以下是几种实用的离线截图方法。 一、利用键盘快捷键进行截图 即使没有网络连接,Windows系统…

    2026年8月30日 用户投稿
    200
  • AI视频软件本地部署 | 快速上手AI视频生成指南

    首先完成环境配置并安装Python与FFmpeg,接着获取Moonshot AI和Pexels的API密钥,下载MoneyPrinterPlus工具包并部署ChatTTS语音模型,最后通过输入“科技产品介绍”等主题进行端到端测试,验证脚本生成、素材匹配、语音合成与视频合成全流程是否正常。 ☞☞☞AI…

    2026年8月30日
    100
  • Arm KleidiCV 实现与 OpenCV 集成,加速移动端计算机视觉工作负载

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 生成式和多模态人工智能(AI)的兴起,对计算机视觉(CV)技术的需求日益增长。CV技术能够解析和分析来自现实世界的图像信息,广泛应用于人脸识别、图像分类、图像滤镜和增强现实等领域。然而,在内存、…

    2026年8月30日
    100
  • Dubbo消费者配置中id属性究竟有什么作用?

    深入理解Dubbo消费者配置中的id属性 在使用Dubbo框架进行服务消费时,标签中的id属性常常令人困惑。本文将详细解释中id=”timeservice”的用途。 这段配置用于声明一个Dubbo服务消费者,它将消费名为cn.suiwei.service.timeservice的远程服务。id=”t…

    2026年8月30日
    100
  • 抖音精选账号如何运营_抖音精选持续产出优质内容策略

    抖音精选账号如何运营_抖音精选持续产出优质内容策略抖音精选账号如何运营_抖音精选持续产出优质内容策略抖音精选账号如何运营_抖音精选持续产出优质内容策略抖音精选账号如何运营_抖音精选持续产出优质内容策略

    明确账号定位、构建生产流程、善用AI工具、搭建运营矩阵,通过垂直领域聚焦、标准化内容产出、技术提效与多账号协同,系统提升抖音账号质量与流量增长。 如果您希望在抖音平台上打造一个精选账号并持续产出优质内容,但面临流量增长缓慢或内容同质化的问题,很可能是由于账号定位模糊或内容策略缺乏系统性。以下是提升账…

    2026年8月29日 用户投稿
    000
  • MySQL锁升级机制是什么_如何影响并发性能?

    MySQL锁升级机制是什么_如何影响并发性能?MySQL锁升级机制是什么_如何影响并发性能?MySQL锁升级机制是什么_如何影响并发性能?MySQL锁升级机制是什么_如何影响并发性能?

    mysql的“innodb存储引擎并没有自动锁升级机制。①缺少或不当索引会导致全表扫描,进而锁定大量行或页;②显式使用lock tables直接加表锁;③ddl操作如alter table需表级锁保证结构一致性;④大事务或长事务长时间持有大量行锁影响并发;⑤优化器基于成本选择全表扫描而非索引查找。这…

    2026年8月29日 用户投稿
    200
  • Linux文件系统fsck命令详解

    fsck是Linux中检查修复文件系统的工具,用于系统异常断电、磁盘错误等导致文件系统损坏时,通过卸载分区后使用如-a、-y、-n等参数进行自动或只读检查修复,可结合tune2fs设置周期检测,操作前需备份数据并确保设备未挂载以避免风险。 fsck(File System Consistency C…

    2026年8月29日
    100
  • 数智共振!三七互娱与华为构筑文娱产业新生态

    当人工智能、5g与云计算等数字技术以前所未有的方式重构文娱产业格局,沉浸式体验、个性化推荐以及全球化分发逐渐成为新常态,数字基建已成为推动文娱产业升级、连接全球用户的关键动力。 在数智文娱创新领域,总部设于广州的全球知名文娱企业三七互娱,依托“文化+科技”双轮驱动战略,在智慧办公空间建设、全球文化I…

    2026年8月29日
    000
  • Laravel 中的数据加密和解密

    本指南介绍了如何在 Laravel 模型中实现敏感数据的加密和解密。通过执行以下步骤,您可以在将数据存储到数据库之前保护数据并在检索数据时对其进行解密。  先决条件 Laravel:确保您使用的是 Laravel 项目。加密密钥:Laravel 在 .env 文件中自动生成 APP_KEY。该密钥由…

    2026年8月29日
    200
  • vivo X Fold 5正式开售!苹果用户的最强搭子 6999元起

    7月2日10点,vivo新款折叠屏机型x fold5正式开售,起售价为6999元(12gb+256gb)。 vivo X Fold5 作为全球最轻大折叠机型之一,vivo X Fold5主屏采用8.03英寸AMOLED屏幕,分辨率为2480×2200;外屏尺寸为6.53英寸,拥有2748×1172像…

    2026年8月29日
    100
  • laravel如何使用Spatie/laravel-activitylog记录用户活动_Laravel Spatie活动日志记录用户操作教程

    安装 laravel-activitylog 包并发布配置文件和迁移;2. 通过 LogsActivity trait 自动记录模型变更,如 User 模型的 name 和 email 字段变化;3. 使用 activity() 辅助函数手动记录用户操作,支持指定操作人、对象和附加属性;4. 查询 …

    2026年8月29日
    200

发表回复

登录后才能评论
关注微信