Promise核心原理与高频面试题解析

## 1. Promise基础与面试核心考察点 作为前端开发的核心异步解决方案Promise几乎出现在所有技术面试的手写环节。面试官通过考察Promise实现主要验证三个维度的能力 - 对异步编程思想的理解深度 - 原生API的底层实现原理掌握程度 - 复杂逻辑的代码组织能力 其中for循环与Promise的结合尤为高频因为它能同时考察 1. 闭包与作用域链的应用 2. 事件循环机制的理解 3. 异步流程控制的实际编码能力 ## 2. 手写Promise基础实现 ### 2.1 最小化Promise构造函数 javascript class MyPromise { constructor(executor) { this.state pending this.value undefined this.reason undefined const resolve (value) { if (this.state pending) { this.state fulfilled this.value value } } const reject (reason) { if (this.state pending) { this.state rejected this.reason reason } } try { executor(resolve, reject) } catch (err) { reject(err) } } }关键点说明必须维护三种状态pending/fulfilled/rejectedresolve/reject需要状态保护只能从pending变更executor需要try-catch包裹2.2 then方法基础实现then(onFulfilled, onRejected) { if (this.state fulfilled) { onFulfilled(this.value) } if (this.state rejected) { onRejected(this.reason) } }注意这里还未处理异步情况实际面试需要继续完善3. for循环下的Promise高频考题3.1 题目一顺序执行异步任务const tasks [1000, 2000, 500].map(time () new Promise(r setTimeout(() { console.log(time) r(time) }, time)) ) // 实现顺序执行非并行 async function executeSequentially(tasks) { for (const task of tasks) { await task() } }考察重点for-of与await的配合使用理解async函数返回的也是Promise与Promise.all的并行方案对比3.2 题目二超时控制实现function withTimeout(promise, timeout) { return new Promise((resolve, reject) { const timer setTimeout(() { reject(new Error(Timeout)) }, timeout) promise.then( res { clearTimeout(timer) resolve(res) }, err { clearTimeout(timer) reject(err) } ) }) }易错点忘记清理定时器导致内存泄漏未正确处理原Promise的reject情况计时器与Promise的状态竞争3.3 题目三限制并发数class PromisePool { constructor(maxConcurrent) { this.max maxConcurrent this.queue [] this.running 0 } add(task) { return new Promise((resolve, reject) { this.queue.push(() task().then(resolve, reject) ) this.run() }) } run() { while (this.running this.max this.queue.length) { const task this.queue.shift() task().finally(() { this.running-- this.run() }) this.running } } }核心技巧通过队列管理待执行任务running计数器控制并发量递归触发任务执行3.4 题目四重试机制实现function retry(fn, times, delay) { return new Promise((resolve, reject) { const attempt (remaining) { fn().then(resolve) .catch(err { if (remaining 0) { reject(err) } else { setTimeout(() attempt(remaining - 1), delay) } }) } attempt(times) }) }优化方向支持指数退避策略增加取消重试的能力区分可重试错误类型4. 深度原理与性能优化4.1 微任务队列的实现// 简单模拟微任务队列 const microTaskQueue [] let isFlushing false function queueMicrotask(fn) { microTaskQueue.push(fn) if (!isFlushing) { isFlushing true Promise.resolve().then(() { while (microTaskQueue.length) { microTaskQueue.shift()() } isFlushing false }) } }4.2 Promise链的内存管理长时间Promise链可能导致的内存问题未被释放的闭包引用未处理的拒绝Promise循环引用风险优化方案及时处理rejected状态避免不必要的闭包使用async/await替代长then链5. 实战问题排查手册现象可能原因解决方案回调未执行忘记resolve/reject调用检查所有代码路径结果顺序错乱未使用顺序控制结构改用for循环await内存持续增长未清理事件监听器使用AbortController未捕获异常缺少catch处理全局添加unhandledrejection监听特别提醒在Node.js环境测试时注意版本差异如v11前后微任务队列变化