手写一个符合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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 02:13:26
下一篇 2025年12月21日 02:13:42

相关推荐

  • 在 Cypress 测试中创建和重用对象数据

    在 cypress 测试中,直接在异步回调函数外部访问变量常导致 ‘未定义’ 错误。本文将详细讲解如何利用 cypress 的别名(alias)机制,从服务器响应中捕获并封装复杂数据对象。通过 `cy.wrap().as()` 创建别名,再使用 `cy.get().then(…

    2025年12月21日
    000
  • js对象数组去重的方法

    答案:对象数组去重需根据唯一属性、多属性组合或完全深比较判断重复。1. 按单字段如id去重可用reduce或Map结构;2. 多字段组合可拼接key或用JSON.stringify生成标识;3. 全属性相同可用JSON.stringify比较,但不支持undefined、函数等值,推荐lodash的…

    2025年12月21日
    000
  • JavaScript代码压缩与混淆原理浅析_js工程化

    代码压缩与混淆通过减小体积和增加逆向难度提升性能与安全性,常用工具如Terser和JavaScript Obfuscator,在Webpack、Vite等工程化工具中集成,生产环境应权衡压缩、混淆强度与可维护性。 JavaScript代码压缩与混淆是前端工程化中不可或缺的一环,尤其在生产环境中,它直…

    2025年12月21日
    000
  • 利用Node.js的EventEmitter实现自定义事件

    EventEmitter是Node.js中实现事件驱动编程的核心工具,通过继承可为对象添加监听与触发事件能力。首先从events模块导入:const { EventEmitter } = require(‘events’);,接着创建类继承EventEmitter以使用on、…

    2025年12月21日
    000
  • Excel VBA与OfficeJS Add-in通信:理解限制与官方建议

    本文探讨了在excel vba中监听事件并调用officejs add-in中javascript/typescript函数的尝试。核心结论是,office javascript api目前不支持vba与officejs add-in之间的直接双向通信。文章解释了这种限制背后的原因,并建议通过官方渠…

    2025年12月21日
    000
  • 深入理解JavaScript闭包及其应用场景_javascript技巧

    闭包是函数访问并记住外部作用域变量的机制,如inner函数保留对outer中count的引用,使count在outer执行后仍存在于内存中。 闭包是JavaScript中一个核心且强大的概念,理解它对掌握异步编程、模块化开发和函数式编程至关重要。简单来说,闭包是指一个函数能够访问并记住其外部作用域中…

    2025年12月21日
    000
  • Svelte与Vite构建多模块应用在Webflow中的变量隔离指南

    本文旨在解决在webflow等页面中加载多个svelte+vite构建的javascript文件时,因全局变量冲突导致的脚本执行失败问题。我们将探讨两种核心解决方案:利用es模块的type=”module”属性实现作用域隔离,以及通过vite的库模式(library mode…

    2025年12月21日
    000
  • JavaScript 代码规范:ESLint 配置与规则定制

    ESLint 是提升 JavaScript 代码质量的关键工具,通过配置 env、extends、parserOptions 和 rules 可实现环境识别、规则继承与语法支持;结合 eslint-config-prettier 避免格式冲突,引入 eslint-plugin-react 等插件适配…

    2025年12月21日
    000
  • Excel VBA与OfficeJS互操作性:监听事件与函数调用限制解析

    本文深入探讨了在excel vba中监听事件并尝试调用officejs函数的技术挑战。明确指出,office javascript api(officejs)目前不直接支持vba与officejs之间的双向通信。文章解释了这种限制的根本原因,并强调了现有架构下无法通过`msscriptcontrol…

    2025年12月21日
    000
  • Cypress测试中高效管理与复用数据:深入理解别名(Aliases)

    在cypress测试中,如何在异步操作(如api响应处理)中创建并有效复用数据对象是一个常见挑战。本文将深入探讨cypress的别名(aliases)机制,演示如何利用cy.wrap()和.as()将复杂数据结构安全地存储为别名,并在测试的不同阶段通过cy.get()进行检索和使用,从而解决变量作用…

    2025年12月21日
    000
  • 如何创建一个分页组件插件_JavaScript分页插件开发与功能实现教程

    答案:开发一个轻量级JavaScript分页插件,通过封装分页逻辑实现可复用性。首先设计包含container、total、pageSize、currentPage、maxVisiblePages和callback等参数的配置结构,计算总页数并生成DOM;核心逻辑包括根据当前页动态计算显示页码范围,…

    2025年12月21日
    000
  • JSSet数据结构怎么用_JavaScriptSet集合使用方法与去重技巧

    JavaScript中的Set用于存储唯一值,自动去重,支持add、delete、has、clear方法及size属性,可通过展开运算符与数组互转,适合处理数组去重和集合运算(并集、交集、差集),但对象去重需结合Map或属性判断。 JavaScript 中的 Set 是一种内置的数据结构,用于存储唯…

    2025年12月21日
    000
  • 使用JavaScript实现一个简单的路由_js SPA

    单页应用通过JavaScript路由实现视图切换,利用hash变化监听动态更新内容,支持静态路径映射与动态参数匹配,提升用户体验且无需服务端配合,适用于小型项目。 单页应用(SPA)通过动态更新页面内容,避免整页刷新,提升用户体验。JavaScript 路由是实现 SPA 的核心机制之一。下面介绍如…

    2025年12月21日
    000
  • Js如何存储执行上下文

    JavaScript通过执行上下文栈管理代码执行,首先创建全局上下文并压入栈底;每当调用函数时,会创建新的函数执行上下文并压入栈顶,执行完毕后出栈,控制权交还上层上下文。每个执行上下文包含词法环境、变量环境和this绑定三部分,其中词法环境处理let/const声明及作用域链,变量环境处理var声明…

    好文分享 2025年12月21日
    000
  • JS闭包原理怎么理解_JS闭包概念与实际应用场景详解

    闭包是函数记住并访问其词法作用域的机制,即使在外部函数执行完毕后仍能访问内部变量。如outer函数中的inner函数通过闭包保留对count的访问权,实现计数累加;闭包还用于创建私有变量、解决循环中异步回调共享变量问题及函数工厂等场景,但需注意可能引发内存泄漏和意外共享。 闭包是JavaScript…

    2025年12月21日
    000
  • React中异步操作与状态管理的最佳实践:useEffect在认证路由中的应用

    本文深入探讨了react中`usestate`异步更新的特性,以及在处理异步数据获取(如用户认证)时,如何正确使用`useeffect`钩子。通过一个私有路由组件的实例,文章详细阐述了将异步逻辑封装在`useeffect`中、处理竞态条件、以及管理加载状态的最佳实践,旨在帮助开发者构建更健壮、响应更…

    2025年12月21日
    000
  • JavaScript中的代码分割与动态导入

    代码分割是一种通过打包工具将大文件拆分为小块的构建策略,结合动态导入实现按需加载。常见方式包括入口点分割、公共依赖提取和路由级分割,其中动态导入使用 import() 语法异步加载模块,支持条件加载与错误处理。在 React 中可配合 React.lazy 和 Suspense 实现路由懒加载,通过…

    2025年12月21日
    000
  • Coloris.js:实现页面加载时自动打开颜色选择器

    本文详细介绍了如何使用coloris.js库,在网页加载时自动打开颜色选择器。核心方法是结合`inline: true`配置选项与正确的css容器定位(`position: relative`或`absolute`),并指定`parent`容器。通过此教程,您将学会如何设置html结构、css样式以…

    2025年12月21日
    000
  • js中如何自定义迭代行为

    答案:通过实现 Symbol.iterator 方法可使对象可迭代,该方法返回带有 next() 的迭代器对象,从而支持 for…of 和扩展运算符。示例中遍历 data 数组返回值和 done 状态。 在 JavaScript 中,可以通过 Symbol.iterator 来自定义对象…

    2025年12月21日
    000
  • js对象模式如何理解

    对象模式是利用JavaScript对象封装数据和行为的编程思想。1. 字面量对象用于配置或工具模块;2. 工厂函数生成相似实例,提升复用性;3. 模块模式借助闭包隐藏私有变量,增强安全性。它提升代码可读性、减少全局污染、支持动态扩展,适用于逻辑组织与协作开发。 JavaScript中的对象模式,通常…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信