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

JS案例-Promise/A+ 规范的手写实现

news 2025/4/29 8:31:32

Promise/A+ 规范的手写实现

文章目录

Promise/A+ 规范的手写实现
- 引言
- Promise/A+ 规范概述
- 核心实现架构设计
- - 状态管理机制
  - 构造函数的设计
  - then方法的实现
  - Promise解析过程
- 关键实现难点
- - 1. 异步执行保证
  - 2. 链式调用的正确性
  - 3. thenable对象的处理
  - 4. 错误处理机制
- 实现价值与总结
效果
全部代码
- HTML
- promise.js
- tests.js
- css

引言

在现代JavaScript开发中，异步编程已成为不可或缺的部分。Promise作为处理异步操作的核心机制，革新了传统的回调函数模式，为开发者提供了更加优雅和可维护的解决方案。深入理解Promise的内部机制，特别是按照Promise/A+规范实现一个Promise，不仅能够帮助开发者更好地使用这一特性，还能提升对JavaScript异步编程本质的认知。

Promise/A+ 规范概述

Promise/A+规范是JavaScript Promise实现的标准规范，它定义了Promise的基本行为和API。规范的核心要求包括：

Promise的三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）
状态转换的不可逆性：一旦Promise的状态发生改变，就不能再改变
then方法的行为：必须返回一个新的Promise，支持链式调用
promise解析过程的详细规则：如何处理then回调的返回值

核心实现架构设计

一个符合Promise/A+规范的实现需要包含以下几个关键部分：

状态管理机制

Promise需要维护其内部状态，并确保状态转换的正确性。这包括：

状态属性（state）
成功值（value）
失败原因（reason）
回调函数队列（用于存储待执行的回调）

构造函数的设计

构造函数接收一个执行器函数（executor），该函数包含resolve和reject两个参数。这些参数允许用户控制Promise的状态转换。

constructor(executor) {// 初始化状态为pendingthis.state = 'pending';this.value = undefined;this.reason = undefined;this.onFulfilledCallbacks = [];this.onRejectedCallbacks = [];// resolve函数定义const resolve = (value) => {if (this.state === 'pending') {this.state = 'fulfilled';this.value = value;this.onFulfilledCallbacks.forEach(fn => fn());}};// reject函数定义const reject = (reason) => {if (this.state === 'pending') {this.state = 'rejected';this.reason = reason;this.onRejectedCallbacks.forEach(fn => fn());}};// 执行executortry {executor(resolve, reject);} catch (error) {reject(error);}
}

then方法的实现

then方法是Promise最核心的部分，它需要：

返回一个新的Promise实例
根据当前Promise的状态执行相应的回调
处理回调函数的返回值
支持链式调用

Promise解析过程

resolvePromise函数是实现Promise链式调用的关键。它处理以下情况：

检查循环引用
处理返回值为Promise的情况
处理thenable对象
普通值的处理

关键实现难点

在实现过程中，开发者需要特别注意以下几个技术难点：

1. 异步执行保证

规范要求then方法的回调必须异步执行，即使Promise已经处于resolved或rejected状态。这通常通过setTimeout或微任务机制实现。

2. 链式调用的正确性

确保then方法总是返回一个新的Promise，且新Promise的状态取决于回调函数的执行结果。

3. thenable对象的处理

需要正确识别和处理具有then方法的对象，这要求对JavaScript的类型检查有深入理解。

4. 错误处理机制

确保所有可能的错误都能被正确捕获和传递到下一个Promise。

实现价值与总结

手写Promise不仅是一个技术练习，更是深入理解JavaScript异步编程的重要途径。通过实现Promise，开发者能够：

深入理解Promise的内部机制和工作原理
提升对异步编程模式的认知
增强调试和排错能力
为处理复杂的异步场景打下坚实基础

效果

在这里插入图片描述

全部代码

HTML

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="刘大大"><meta name="date" content="2025-04-19"><title>Promise/A+ 规范实现</title><link rel="stylesheet" href="styles.css">
</head><body><div class="container"><h1>Promise/A+ 规范实现</h1><!-- 测试 1: 基本的 Promise resolve --><div class="test-section"><div class="test-title">测试 1: 基本的 Promise resolve</div><button onclick="testBasicResolve()">运行测试 1</button><div id="test1-result" class="test-result"></div></div><!-- 测试 2: 基本的 Promise reject --><div class="test-section"><div class="test-title">测试 2: 基本的 Promise reject</div><button onclick="testBasicReject()">运行测试 2</button><div id="test2-result" class="test-result"></div></div><!-- 测试 3: Promise 链式调用 --><div class="test-section"><div class="test-title">测试 3: Promise 链式调用</div><button onclick="testChaining()">运行测试 3</button><div id="test3-result" class="test-result"></div></div><!-- 测试 4: Promise.all() --><div class="test-section"><div class="test-title">测试 4: Promise.all()</div><button onclick="testPromiseAll()">运行测试 4</button><div id="test4-result" class="test-result"></div></div><!-- 测试 5: Promise.race() --><div class="test-section"><div class="test-title">测试 5: Promise.race()</div><button onclick="testPromiseRace()">运行测试 5</button><div id="test5-result" class="test-result"></div></div></div><!-- 引入脚本文件 --><script src="promise.js"></script><script src="tests.js"></script>
</body></html>

promise.js

/*** MyPromise - Promise/A+ 规范实现* @author 刘大大* @date 2025-04-19*/class MyPromise {/*** 构造函数* @param {Function} executor - 执行器函数，接收resolve和reject两个参数*/constructor(executor) {// Promise的三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)this.state = 'pending';// 成功的值this.value = undefined;// 失败的原因this.reason = undefined;// 成功回调函数队列this.onFulfilledCallbacks = [];// 失败回调函数队列this.onRejectedCallbacks = [];/*** resolve函数 - 将Promise状态从pending改为fulfilled* @param {any} value - 成功的值*/const resolve = (value) => {// 只有在pending状态才能改变状态if (this.state === 'pending') {this.state = 'fulfilled';this.value = value;// 执行所有成功回调this.onFulfilledCallbacks.forEach(fn => fn());}};/*** reject函数 - 将Promise状态从pending改为rejected* @param {any} reason - 失败的原因*/const reject = (reason) => {// 只有在pending状态才能改变状态if (this.state === 'pending') {this.state = 'rejected';this.reason = reason;// 执行所有失败回调this.onRejectedCallbacks.forEach(fn => fn());}};try {// 立即执行executorexecutor(resolve, reject);} catch (error) {// 如果executor执行出错，直接rejectreject(error);}}/*** then方法 - 用于处理Promise的结果* @param {Function} onFulfilled - 成功的回调函数* @param {Function} onRejected - 失败的回调函数* @returns {MyPromise} - 返回一个新的Promise以支持链式调用*/then(onFulfilled, onRejected) {// 参数校验，如果不是函数则转换为值传递或抛出错误onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };// 创建新的Promise实例用于链式调用let promise2 = new MyPromise((resolve, reject) => {// 如果Promise已经解决，异步执行回调if (this.state === 'fulfilled') {setTimeout(() => {try {let x = onFulfilled(this.value);// 处理then回调的返回值resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}// 如果Promise已经拒绝，异步执行回调if (this.state === 'rejected') {setTimeout(() => {try {let x = onRejected(this.reason);resolvePromise(promise2, x, resolve, reject);} catch (error) {reject(error);}}, 0);}// 如果Promise还在等待中，将回调加入队列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方法 - 用于捕获Promise的错误* @param {Function} onRejected - 错误处理回调函数* @returns {MyPromise} - 返回一个新的Promise*/catch(onRejected) {return this.then(null, onRejected);}/*** resolve静态方法 - 返回一个以给定值解决的Promise* @param {any} value - 要解决的值* @returns {MyPromise} - 返回一个新的Promise*/static resolve(value) {return new MyPromise((resolve) => {resolve(value);});}/*** reject静态方法 - 返回一个以给定原因拒绝的Promise* @param {any} reason - 拒绝的原因* @returns {MyPromise} - 返回一个新的Promise*/static reject(reason) {return new MyPromise((resolve, reject) => {reject(reason);});}/*** all静态方法 - 等待所有Promise完成* @param {Array<MyPromise>} promises - Promise数组* @returns {MyPromise} - 返回一个新的Promise*/static all(promises) {return new MyPromise((resolve, reject) => {let results = [];let index = 0;let processData = (key, value) => {results[key] = value;if (++index === promises.length) {resolve(results);}};for (let i = 0; i < promises.length; i++) {promises[i].then(value => {processData(i, value);}, reject);}});}/*** race静态方法 - 返回最先解决或拒绝的Promise* @param {Array<MyPromise>} promises - Promise数组* @returns {MyPromise} - 返回一个新的Promise*/static race(promises) {return new MyPromise((resolve, reject) => {for (let i = 0; i < promises.length; i++) {promises[i].then(resolve, reject);}});}
}/*** resolvePromise - Promise解析过程* @param {MyPromise} promise2 - 新的Promise实例* @param {any} x - then回调返回的值* @param {Function} resolve - 新Promise的resolve函数* @param {Function} reject - 新Promise的reject函数*/
function resolvePromise(promise2, x, resolve, reject) {// 防止循环引用if (promise2 === x) {return reject(new TypeError('Chaining cycle detected for promise'));}// 防止多次调用let called = false;// 如果x是对象或函数，尝试将其视为thenableif (x !== null && (typeof x === 'object' || typeof x === 'function')) {try {let then = x.then;// 如果then是函数，将x视为Promise-like对象if (typeof then === 'function') {then.call(x, y => {if (called) return;called = true;// 递归解析PromiseresolvePromise(promise2, y, resolve, reject);}, r => {if (called) return;called = true;reject(r);});} else {resolve(x);}} catch (error) {if (called) return;called = true;reject(error);}} else {// 如果x不是对象或函数，直接resolveresolve(x);}
}

tests.js

/*** 测试函数集合* @author 刘大大* @date 2025-04-19*//*** 测试基本的Promise resolve功能*/
function testBasicResolve() {const resultDiv = document.getElementById('test1-result');resultDiv.innerHTML = '测试开始...\n';// 创建一个将在1秒后resolve的Promiseconst promise = new MyPromise((resolve, reject) => {setTimeout(() => {resolve('成功!');}, 1000);});// 等待Promise resolve并显示结果promise.then(value => {resultDiv.innerHTML += `<span class="success">✓ Promise resolved with: ${value}</span>`;});
}/*** 测试基本的Promise reject功能*/
function testBasicReject() {const resultDiv = document.getElementById('test2-result');resultDiv.innerHTML = '测试开始...\n';// 创建一个将在1秒后reject的Promiseconst promise = new MyPromise((resolve, reject) => {setTimeout(() => {reject('错误发生!');}, 1000);});// 捕获Promise rejection并显示错误信息promise.catch(error => {resultDiv.innerHTML += `<span class="error">✓ Promise rejected with: ${error}</span>`;});
}/*** 测试Promise的链式调用*/
function testChaining() {const resultDiv = document.getElementById('test3-result');resultDiv.innerHTML = '测试开始...\n';// 创建一个resolve为1的Promiseconst promise = new MyPromise((resolve, reject) => {setTimeout(() => {resolve(1);}, 1000);});// 链式调用，每次将值乘以2promise.then(value => {resultDiv.innerHTML += `第一次 then: ${value}\n`;return value * 2;}).then(value => {resultDiv.innerHTML += `第二次 then: ${value}\n`;return value * 2;}).then(value => {resultDiv.innerHTML += `<span class="success">✓ 最终结果: ${value}</span>`;});
}/*** 测试Promise.all功能*/
function testPromiseAll() {const resultDiv = document.getElementById('test4-result');resultDiv.innerHTML = '测试开始...\n';// 创建三个不同延迟的Promiseconst promise1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve(1), 1000);});const promise2 = new MyPromise((resolve, reject) => {setTimeout(() => resolve(2), 2000);});const promise3 = new MyPromise((resolve, reject) => {setTimeout(() => resolve(3), 1500);});// 使用Promise.all等待所有Promise完成MyPromise.all([promise1, promise2, promise3]).then(values => {resultDiv.innerHTML += `<span class="success">✓ Promise.all 结果: [${values.join(', ')}]</span>`;});
}/*** 测试Promise.race功能*/
function testPromiseRace() {const resultDiv = document.getElementById('test5-result');resultDiv.innerHTML = '测试开始...\n';// 创建三个不同延迟的Promiseconst promise1 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('慢'), 2000);});const promise2 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('快!'), 1000);});const promise3 = new MyPromise((resolve, reject) => {setTimeout(() => resolve('中等'), 1500);});// 使用Promise.race，返回最先完成的Promise结果MyPromise.race([promise1, promise2, promise3]).then(value => {resultDiv.innerHTML += `<span class="success">✓ Promise.race 结果: ${value}</span>`;});
}

css

/*** 样式文件* @author 刘大大* @date 2025-04-19*//* 全局样式 */
body {font-family: Arial, sans-serif;line-height: 1.6;margin: 0;padding: 20px;background-color: #f5f5f5;
}/* 容器样式 */
.container {/* max-width: 800px; */margin: 0 auto;background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}/* 标题样式 */
h1 {color: #333;text-align: center;margin-bottom: 30px;
}/* 测试部分容器 */
.test-section {margin: 20px 0;padding: 15px;border: 1px solid #ddd;border-radius: 4px;background-color: #fafafa;
}/* 测试标题 */
.test-title {font-weight: bold;margin-bottom: 10px;color: #555;
}/* 测试结果显示区域 */
.test-result {background-color: #f8f9fa;padding: 10px;border-radius: 4px;margin-top: 10px;white-space: pre-wrap;min-height: 40px;font-family: monospace;
}/* 按钮样式 */
button {background-color: #4CAF50;color: white;padding: 10px 15px;border: none;border-radius: 4px;cursor: pointer;margin-right: 10px;transition: background-color 0.3s ease;
}button:hover {background-color: #45a049;
}button:active {background-color: #3d8b40;
}/* 错误消息样式 */
.error {color: #d32f2f;font-weight: bold;
}/* 成功消息样式 */
.success {color: #2e7d32;font-weight: bold;
}