实现一个简单的Promise

Promise 可以理解为一个容器，保存着所有的异步操作。 将异步操作用同步的形式展现出来。 提供了统一的 API，保证各种一步操作使用统一的方法处理。

对比旧式的回调函数的写法，避免重重嵌套各种回调函数，Promise 使用链式的方式处理异步操作更简洁明了。 Promise 的状态不会受外界影响改变，有三个状态：pending、resolved 和 rejected。 一旦状态改变，就不会再变。状态改变是只有两种方式，从 pending 变为 resolved 和 pending 变为 rejected。

缺点：Promise 一旦创建，则无法取消。如果不设置回调函数，则会内部报错，不会反应到外部。当 Promise 处于 pending 状态，我们无法得知具体是在哪个阶段（是刚开始呢？还是已经快结束了？）。

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

class MyPromise {
  static resolve(value) {
    if (value && value.then) {
      return value;
    }
    return new MyPromise((resolve) => resolve(value));
  }

  constructor(fn) {
    this.status = PENDING;
    this.value = null;
    this.reason = null;
    this.onResolvedCallback = [];
    this.onRejectedCallback = [];
    const resolve = (value) => {
      if (this.status === PENDING) {
        setTimeout(() => {
          this.status = RESOLVED;
          this.value = value;
          this.onResolvedCallback.forEach(({ fn, resolve, reject }) => {
            return resolve(fn(value));
          });
        });
      }
    };
    const reject = (e) => {
      if (this.status === PENDING) {
        setTimeout(() => {
          this.status = REJECTED;
          this.reason = e;
          this.onRejectedCallback.forEach(({ fn, resolve, reject }) => {
            return reject(fn(this.reason));
          });
        });
      }
    };
    fn(resolve, reject);
  }

  then(fn) {
    const status = this.status;
    if (PENDING === status) {
      return new MyPromise((resolve, reject) => {
        this.onResolvedCallback.push({ fn, resolve, reject });
      });
    } else if (RESOLVED === status) {
      return MyPromise.resolve(fn(this.value));
    }
  }

  catch(fn) {
    const status = this.status;
    if (PENDING === status) {
      return new MyPromise((resolve, reject) => {
        this.onRejectedCallback.push({ fn, resolve, reject });
      });
    } else if (REJECTED === status) {
      return MyPromise.resolve(fn(this.value));
    }
  }
}

MyPromise.resolve(10)
  .then((res) => {
    console.log('first called', res);
    return res * 2;
  })
  .then((res) => {
    console.log('second called', res);
  });

new MyPromise((resolve, reject) => reject('null')).catch((e) => {
  console.log('error', e);
});

以上就是【实现一个简单的Promise】的全部内容了,欢迎留言评论进行交流!