当前位置：首页 > 文章列表 > 文章 > 前端 > JS如何实现Promise？原理详解

JS如何实现Promise？原理详解

2025-08-14 13:00:28 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JS如何实现Promise？Promise原理详解》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），状态只能从pending变为fulfilled或rejected，且一旦改变不可逆转；当调用resolve时，状态由pending转为fulfilled，调用reject时转为rejected，此后状态不再变化。

JS如何实现Promise？Promise的原理

Promise本质上是一种处理异步操作的模式，它代表着一个尚未完成的异步操作的结果。JS实现Promise的关键在于模拟Promise的状态管理和链式调用。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn => fn(value));
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn(reason));
      }
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  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') {
        setTimeout(() => { // 模拟异步
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }

      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }

      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });

    return promise2;
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  finally(callback) {
    return this.then(
      value => MyPromise.resolve(callback()).then(() => value),
      reason => MyPromise.resolve(callback()).then(() => { throw reason })
    );
  }

  static resolve(value) {
    return new MyPromise((resolve, reject) => {
      resolve(value);
    });
  }

  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

  static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let count = 0;

      if (promises.length === 0) {
        resolve(results);
        return;
      }

      for (let i = 0; i < promises.length; i++) {
        const promise = promises[i];
        MyPromise.resolve(promise).then(
          value => {
            results[i] = value;
            count++;
            if (count === promises.length) {
              resolve(results);
            }
          },
          reason => {
            reject(reason);
          }
        );
      }
    });
  }

  static race(promises) {
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        const promise = promises[i];
        MyPromise.resolve(promise).then(
          value => {
            resolve(value);
          },
          reason => {
            reject(reason);
          }
        );
      }
    });
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
  }

  let called;
  if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
    try {
      const then = x.then;
      if (typeof then === 'function') {
        then.call(x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        if (called) return;
        called = true;
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}

// Example usage:
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, Promise!');
  }, 1000);
});

promise.then(value => {
  console.log(value); // Output: Hello, Promise!
  return 'Chained value';
}).then(value => {
  console.log(value); // Output: Chained value
}).catch(err => {
  console.error(err);
});

Promise的状态有哪些？状态转换是如何发生的？

Promise有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。状态转换只能从pending到fulfilled或pending到rejected，且一旦发生，状态便不可逆转。

Pending -> Fulfilled: 当异步操作成功完成，调用resolve(value)，Promise状态变为fulfilled，并将结果值value传递给所有then方法注册的onFulfilled回调。
Pending -> Rejected: 当异步操作发生错误，调用reject(reason)，Promise状态变为rejected，并将错误原因reason传递给所有then方法注册的onRejected回调。
状态不可逆转: Promise的状态一旦变为fulfilled或rejected，就不能再变回pending状态，也不能从fulfilled变为rejected，反之亦然。

如何处理Promise链中的错误？

在Promise链中，错误处理通常通过catch方法或then方法的第二个参数（onRejected）来实现。catch方法本质上是then(null, onRejected)的语法糖，用于捕获Promise链中任何地方抛出的错误。

catch方法： 将catch方法添加到Promise链的末尾，可以捕获链中任何未被处理的错误。如果前面的Promise抛出了错误，或者onFulfilled回调中抛出了错误，catch方法会被调用。
```
promise
  .then(value => {
    // ...
  })
  .then(value => {
    // ...
    throw new Error('Something went wrong'); // 抛出错误
  })
  .catch(error => {
    console.error('Error:', error); // 捕获错误
  });
```
then方法的第二个参数： 在then方法中提供第二个参数onRejected，也可以处理错误。但这种方式通常只用于处理紧邻的Promise的错误。
```
promise
  .then(
    value => {
      // ...
    },
    error => {
      console.error('Error:', error); // 捕获promise的错误
    }
  );
```
错误冒泡： 如果在Promise链的某个环节没有提供错误处理，错误会沿着Promise链向下冒泡，直到遇到catch方法或onRejected回调。如果Promise链的末尾仍然没有处理错误，错误可能会被视为未处理的Promise rejection，导致一些环境（如浏览器）发出警告。

Promise.all 和 Promise.race 的区别是什么？它们分别适用于什么场景？

Promise.all和Promise.race都是Promise的静态方法，用于处理多个Promise的并发执行，但它们的行为和适用场景有所不同。

Promise.all(promises)：
- 行为： 接收一个Promise数组（或任何可迭代对象），并返回一个新的Promise。只有当数组中所有的Promise都成功fulfilled时，返回的Promise才会fulfilled，并且会将所有Promise的value值按照数组顺序组成一个新的数组，作为返回Promise的value。如果数组中任何一个Promise rejected，返回的Promise会立即rejected，并将第一个rejected的Promise的reason作为返回Promise的reason。
- 适用场景： 适用于需要等待所有异步操作完成后才能进行下一步操作的场景。例如，需要并行请求多个API，只有当所有API都返回数据后才能渲染页面。
- 示例：
```
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // Output: [1, 2, 3]
  })
  .catch(error => {
    console.error(error);
  });
```
Promise.race(promises)：
- 行为： 接收一个Promise数组（或任何可迭代对象），并返回一个新的Promise。返回的Promise会采用数组中第一个fulfilled或rejected的Promise的值或原因。也就是说，哪个Promise先完成（无论是成功还是失败），就采用它的结果。
- 适用场景： 适用于只需要一个异步操作完成即可的场景。例如，设置请求超时，如果请求在规定时间内没有返回，就使用一个reject的Promise来取消请求。
- 示例：
```
const promise1 = new Promise(resolve => setTimeout(() => resolve('Promise 1'), 500));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Promise 2'), 100));

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value); // Output: Promise 2 (因为promise2先完成)
  })
  .catch(error => {
    console.error(error);
  });
```