JS如何实现Promise？Promise的原理-js教程-PHP中文网

JS如何实现Promise？Promise的原理

月夜之吻

发布： 2025-08-22 12:07:01

原创

783人浏览过

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)
```
登录后复制
：

ViiTor实时翻译
AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情
- 行为： 接收一个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);
  });
```
  登录后复制