大道至简，从零实现Promise，让你轻松掌握异步编程

2023-11-15 16:10:54

什么是Promise？

Promise是一个JavaScript对象，用于处理异步操作。它提供了一种方法来处理异步操作的结果，无论成功还是失败。Promise可以很容易地链接在一起，形成链式调用，从而可以更轻松地处理复杂的异步操作。

实现一个简单的Promise

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') {
        return;
      }

      this.state = 'fulfilled';
      this.result = value;
      this.onFulfilledCallbacks.forEach((callback) => callback(value));
    };

    const reject = (error) => {
      if (this.state !== 'pending') {
        return;
      }

      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach((callback) => callback(error));
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push((value) => {
          setTimeout(() => {
            try {
              const result = onFulfilled(value);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push((error) => {
          setTimeout(() => {
            try {
              const result = onRejected(error);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

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

  finally(onFinally) {
    return this.then(
      (value) => {
        setTimeout(() => {
          onFinally();
        }, 0);

        return value;
      },
      (error) => {
        setTimeout(() => {
          onFinally();
        }, 0);

        return Promise.reject(error);
      }
    );
  }
}

使用Promise

可以使用如下方式使用Promise：

const promise = new Promise((resolve, reject) => {
  // 做一些异步操作

  if (异步操作成功) {
    resolve('成功结果');
  } else {
    reject('错误结果');
  }
});

promise
  .then((result) => {
    console.log('成功结果：', result);
  })
  .catch((error) => {
    console.log('错误结果：', error);
  });