手写Promise 一目了然 (另附完整demo)

Promise 简介

    Promise 是 JavaScript 中用来处理异步操作的类。它可以让你将异步操作的结果包装成一个对象，然后在将来某个时间点再获取该结果。

    **手写Promise** 

    ```
    class Promise {
      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((callback) => {
              callback(value);
            });
          }
        };

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

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

      then(onFulfilled, onRejected) {
        return new Promise((resolve, reject) => {
          if (this.state === 'fulfilled') {
            onFulfilled(this.value);
            resolve(this.value);
          } else if (this.state === 'rejected') {
            onRejected(this.reason);
            reject(this.reason);
          } else {
            this.onFulfilledCallbacks.push(() => {
              onFulfilled(this.value);
              resolve(this.value);
            });
            this.onRejectedCallbacks.push(() => {
              onRejected(this.reason);
              reject(this.reason);
            });
          }
        });
      }

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

      static resolve(value) {
        return new Promise((resolve) => {
          resolve(value);
        });
      }

      static reject(reason) {
        return new Promise((_, reject) => {
          reject(reason);
        });
      }

      static all(promises) {
        return new Promise((resolve, reject) => {
          const results = [];
          let pendingCount = promises.length;

          promises.forEach((promise, index) => {
            promise.then((value) => {
              results[index] = value;
              pendingCount--;
              if (pendingCount === 0) {
                resolve(results);
              }
            }).catch((reason) => {
              reject(reason);
            });
          });
        });
      }

      static race(promises) {
        return new Promise((resolve, reject) => {
          promises.forEach((promise) => {
            promise.then((value) => {
              resolve(value);
            }).catch((reason) => {
              reject(reason);
            });
          });
        });
      }
    }
    ```

    **Promise 常用方法** 

    - **resolve()** : 将Promise的状态变为 `fulfilled`，并且传入一个值作为结果。
    - **reject()** : 将Promise的状态变为 `rejected`，并且传入一个值作为原因。
    - **then()** : 用于在Promise完成时执行回调函数。
    - **catch()** : 用于在Promise被拒绝时执行回调函数。

    **Promise 静态方法** 

    - **resolve()** : 将传入的值包装成一个Promise对象，并且该Promise对象的状态为 `fulfilled`。
    - **reject()** : 将传入的值包装成一个Promise对象，并且该Promise对象的状态为 `rejected`。
    - **all()** : 等待所有传入的Promise对象都完成，然后返回一个Promise对象，该Promise对象的状态为 `fulfilled`，并且传入的值为所有传入Promise对象的结果。
    - **race()** : 等待传入的Promise对象中任意一个完成，然后返回一个Promise对象，该Promise对象的状态为 `fulfilled`，并且传入的值为第一个完成的Promise对象的结果。

    **完整demo** 

    ```
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('成功');
      }, 1000);
    });

    promise.then((value) => {
      console.log(value);
    }).catch((reason) => {
      console.log(reason);
    });
    ```

    输出：

    ```
    成功
    ```

    **总结** 

    以上就是手写Promise以及Promise常用方法的介绍。通过手写Promise，我们可以更加深入地理解Promise的原理，并且可以根据自己的需求对Promise进行扩展和定制。