每日前端手写题--day1：手写Promise实现详解与实战应用

一、为什么需要每日前端手写题？

前端开发领域技术迭代迅速，框架与工具层出不穷，但开发者对底层原理的掌握程度往往决定了其技术深度。每日前端手写题的核心价值在于通过刻意练习，将抽象概念转化为可操作的代码实现，从而加深对技术本质的理解。以Promise为例，虽然现代前端工程中广泛使用async/await语法，但理解Promise的底层机制（如状态管理、链式调用、异步调度）仍是解决复杂异步问题的关键。

二、Promise的核心机制解析

1. Promise状态与结果管理

Promise对象具有三种状态：pending（初始）、fulfilled（成功）、rejected（失败）。状态一旦改变便不可逆，这是保证异步操作安全性的基础。实现时需通过闭包保存状态与结果：

class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态
    this.value = undefined; // 成功结果
    this.reason = undefined; // 失败原因
    this.onFulfilledCallbacks = []; // 成功回调队列
    this.onRejectedCallbacks = []; // 失败回调队列
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

关键点：通过闭包封装resolve和reject，确保状态变更的同步性；使用回调队列处理异步场景下的then方法调用。

2. then方法的链式调用实现

Promise的链式调用依赖then方法返回新Promise的特性。实现时需处理两种情况：

• 同步返回值：直接包装为新Promise的resolve值

• 异步返回值：通过微任务队列（如queueMicrotask）调度执行

  then(onFulfilled, onRejected) {
  // 参数可选处理
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; };
  const promise2 = new MyPromise((resolve, reject) => {
    if (this.state === 'fulfilled') {
      queueMicrotask(() => {
        try {
          const x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    } else if (this.state === 'rejected') {
      queueMicrotask(() => {
        try {
          const x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    } else if (this.state === '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;
  }

  关键点：使用queueMicrotask实现微任务调度，确保then回调的异步执行顺序；通过resolvePromise函数处理链式调用的返回值解析。

三、实战应用：自定义Promise方法扩展

1. 实现Promise.all方法

static all(promises) {
  return new MyPromise((resolve, reject) => {
    const results = [];
    let completed = 0;
    const len = promises.length;
    if (len === 0) return resolve(results);
    promises.forEach((promise, index) => {
      MyPromise.resolve(promise).then(
        value => {
          results[index] = value;
          completed++;
          if (completed === len) resolve(results);
        },
        reason => reject(reason)
      );
    });
  });
}

应用场景：批量请求合并处理、并行任务依赖管理。

2. 实现Promise.race方法

static race(promises) {
  return new MyPromise((resolve, reject) => {
    promises.forEach(promise => {
      MyPromise.resolve(promise).then(resolve, reject);
    });
  });
}

应用场景：超时控制、竞速请求优化。

四、开发者进阶建议

1. 源码阅读：对比实现与原生Promise的差异，重点关注事件循环机制中的任务调度
2. 调试技巧：使用Chrome DevTools的Performance面板分析异步执行时序
3. 扩展练习：尝试实现Promise的finally、allSettled等方法
4. 类型安全：结合TypeScript完善Promise实现的类型定义

五、总结

通过手写Promise实现，开发者能够深入理解异步编程的核心机制，这种从底层到上层的认知构建，远比单纯使用API更能提升问题解决能力。每日前端手写题的实践价值在于：

• 强化对ES6+特性的掌握
• 培养系统化思维
• 提升代码调试与优化能力

建议开发者建立持续练习的习惯，每日投入30分钟进行代码实现与复盘，逐步构建坚实的技术基础。