关于前端:手动实现-Promise

Promise 代表了一个异步操作的最终实现或者失败

定义状态

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

构造函数定义

function MyPromise(excutor) {
  // 初始状态为 pending
  this.status = PENDING;
  // 胜利的值
  this.value = undefined;
  // 失败的起因
  this.reason = undefined;
  // then 的回调函数汇合
  this.fulfilledCallback = [];
  this.rejectedCallback = [];

  const resolve = (value) => {
    if (this.status === PENDING) {
      this.status = FULFILLED;
      this.value = value;
      setTimeout(() => {
        // 状态变更后执行 then 的回调函数
        this.fulfilledCallback.forEach((fn) => fn(value));
      });
    }
  };

  const reject = (reason) => {
    if (this.status === PENDING) {
      this.status = REJECTED;
      this.reason = reason;
      setTimeout(() => {
        this.rejectedCallback.forEach((fn) => fn(reason));
      }, 0);
    }
  };

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

原型办法

MyPromise.prototype.then = function (onResolve, onReject) {
  (onResolve = onResolve === undefined ? (value) => value : onResolve),
    (onReject =
      onReject === undefined
        ? (error) => {
            throw error;
          }
        : onReject);

  return new MyPromise((resolve, reject) => {
    function handle(func, value) {
      try {
        const result = func(value);
        // 如果返回一个 Promise
        if (result instanceof MyPromise) {
          result.then(resolve, reject);
        } else {
          resolve(result);
        }
      } catch (err) {
        reject(err);
      }
    }

    if (this.status === FULFILLED) {
      setTimeout(() => {
        handle(onResolve, this.value);
      });
    }

    if (this.status === REJECTED) {
      setTimeout(() => {
        handle(onReject, this.reason);
      });
    }

    // 状态为 pending，将回调函数保留到后面定义的函数汇合中
    if (this.status === PENDING) {
      // 保留到 fulfilledCallback
      this.fulfilledCallback.push((value) => {
        handle(onResolve, value);
      });

      // 保留到 rejectedCallback
      this.rejectedCallback.push((reason) => {
        handle(onReject, reason);
      });
    }
  });
};

MyPromise.prototype.catch = function (onReject) {
  return this.then(undefined, onReject);
};

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

静态方法

MyPromise.resolve = function (value) {
  // 如果参数是MyPromise实例，间接返回这个实例
  if (value instanceof MyPromise) return value;
  return new MyPromise((resolve) => resolve(value));
};

MyPromise.reject = function (value) {
  // 如果参数是MyPromise实例，间接返回这个实例
  if (value instanceof MyPromise) return value;
  return new MyPromise((resolve, reject) => reject(value));
};

MyPromise.race = function (promises) {
  return new Promise((resolve, reject) => {
    promises.forEach((p) => {
      MyPromise.resolve(p).then(resolve, reject);
    });
  });
};

MyPromise.all = function (promises) {
  let result = [];
  const len = promises.length;
  return new MyPromise((resolve, reject) => {
    promises.forEach((p, index) => {
      MyPromise.resolve(p).then(
        (res) => {
          result[index] = res;
          if (result.length === len) {
            resolve(result);
          }
        },
        (error) => {
          reject(error);
        }
      );
    });
  });
};

MyPromise.allSettled = function (promises) {
  let result = [];
  const len = promises.length;
  return new MyPromise((resolve, reject) => {
    promises.forEach((p, index) => {
      MyPromise.resolve(p).then(
        (value) => {
          result[index] = {
            status: FULFILLED,
            value,
          };
          if (result.length === len) {
            resolve(result);
          }
        },
        (reason) => {
          result[index] = {
            status: REJECTED,
            reason,
          };
          if (result.length === len) {
            resolve(result);
          }
        }
      );
    });
  });
};