Promise 是异步操作的解决方案，通过状态管理（pending、fulfilled、rejected）实现链式调用与统一错误处理，其核心在于状态不可逆和回调函数的注册与执行机制，手写 MyPromise 可深入理解构造函数、then 方法、resolvePromise 等关键逻辑，结合发布订阅模式和微任务队列模拟异步流程，相比回调函数更清晰可控，且为 async/await 提供底层支持。
Promise 是 JavaScript 中处理异步操作的核心机制之一。它并不是替代回调函数的“新语法”，而是一种更清晰、更可控的异步编程模式。理解 Promise 的实现原理，有助于掌握其运行机制，也能更好地应对复杂的异步流程控制。
Promise 的核心思想
Promise 表示一个异步操作的最终完成或失败，以及其结果值。它的设计目标是解决“回调地狱”（Callback Hell）问题，通过链式调用和统一的错误处理机制提升代码可读性和维护性。
一个原生的 Promise 有三种状态：
pending（等待中）：初始状态，既没有被完成也没有被拒绝 fulfilled（已成功）：操作成功完成 rejected（已失败）：操作失败
状态一旦从 pending 变为 fulfilled 或 rejected，就不可逆，不能再改变。
立即学习“Java免费学习笔记（深入）”；
手写一个简易 Promise
为了理解其实现原理，我们可以实现一个简化版的 Promise，称为 MyPromise。
class MyPromise { constructor(executor) { this.status = 'pending'; this.value = undefined; this.reason = undefined; 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 (err) { reject(err); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val; onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; }; return new MyPromise((resolve, reject) => { if (this.status === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); resolvePromise(x, resolve, reject); } catch (e) { reject(e); } }); } if (this.status === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); resolvePromise(x, resolve, reject); } catch (e) { reject(e); } }); } if (this.status === 'pending') { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); resolvePromise(x, resolve, reject); } catch (e) { reject(e); } }); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); resolvePromise(x, resolve, reject); } catch (e) { reject(e); } }); }); } }); }}function resolvePromise(x, resolve, reject) { if (x instanceof MyPromise) { x.then(resolve, reject); } else { resolve(x); }}
这个简化实现包含了以下关键点：
构造函数接收一个执行器（executor），立即执行，并传入 resolve 和 reject 函数 通过数组存储异步 resolved 或 rejected 后需要执行的回调（发布订阅模式） then 方法支持链式调用，返回新的 Promise 实例 使用 setTimeout 模拟微任务队列（实际中 Promise 使用 MutationObserver 或 queueMicrotask） resolvePromise 处理返回值可能为 Promise 的情况，实现链式传递
Promise 解决异步问题的优势
相比传统的回调函数，Promise 提供了更优雅的异步解决方案：
链式调用：避免层层嵌套，代码线性化。例如：fetch().then(...).then(...).catch() 统一错误处理：通过 catch 捕获前面任意步骤的异常，无需每个回调都处理错误 状态管理清晰：状态不可逆，逻辑更可控 可组合性强：支持 Promise.all、Promise.race 等并发控制方法
与 async/await 的关系
async 函数是 Promise 的语法糖。每一个 async 函数返回的都是一个 Promise，而 await 则是 Promise.then 的语法层面封装。
例如：
async function getData() { const res = await fetch('/api/data'); const data = await res.json(); return data;}
等价于：
function getData() { return fetch('/api/data') .then(res => res.json());}
async/await 让异步代码看起来像同步，但底层依然依赖 Promise 实现。
基本上就这些。Promise 不复杂但容易忽略细节，比如状态变更的不可逆性、then 的微任务特性、链式返回的新实例等。掌握其实现原理，能帮助你在复杂场景中写出更健壮的异步逻辑。
以上就是JavaScriptPromise实现原理_JavaScript异步解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540767.html
微信扫一扫 
支付宝扫一扫 
