Promise

81 阅读2分钟

解析

  1. Promise 是构造函数 new 出的实例 有 then 方法
  2. new promise 传递参数为一个 function 称为执行器函数(executor) executor 会被立即调用 【start === > 】 优先输出
  3. executor 接受 两个参数 同时这两个参数 也是函数
  4. 存在实例状态 等待 成功 结束 调用完成
  5. 实例状态一经改变,便不能修改
  6. 实例 then 中参数有两个状态 success 和 error
/**
 * 自定义class promise
 * @class ClassPromise
 */
 
const PENDING = "pending"; // 等待中
const FULFILLED = "fulfilled"; // 实现
const REJECTED = "rejected"; // 驳回
const FINALLY = "finally"; // 结束

class ClassPromise {
  // 构造方法
  constructor(executor) {
    // 数据初始化
    this.initData();

    // 初始化this指向
    this.initThisPoint();

    // 执行器 resolve 和 reject 方法
    executor(this.resolve, this.reject);
  }

  // 数据初始化
  initData() {
    this.status = PENDING; // 状态
    this.data = undefined; // 成功数据
    this.reason = undefined; // 失败原因
    this.successCallback = undefined; // 记录成功回调的方法
    this.failCallback = undefined; // 记录失败的回调方法
    this.finallyCallback = undefined; // 记录结束的回调方法
  }

  // 初始化this指向当前类
  initThisPoint() {
    this.resolve = this.resolve.bind(this);
    this.reject = this.reject.bind(this);
  }

  // resolve 方法 -> fulfilled 实现
  resolve(data) {
    // 因为状只能是pending=> fulfilled/rejected 如果其他状态就返回
    if (this.status !== PENDING) return;
    // 执行之后状态更改为fulfilled
    this.status = FULFILLED;
    // 把成功返回值保存在变量里边
    this.data = data;
    // 判断方法是否存在并且执行成功回调方法
    this.successCallback && this.successCallback(this.data);
  }

  // reject 方法 -> rejected 驳回
  reject(err) {
    if (this.status !== PENDING) return;
    this.status = REJECTED;
    this.reason = err; // 存储失败的返回值
    this.failCallback && this.failCallback(this.reason);
  }

  // 成功回调
  then(successCallback, failCallback, finallyCallback) {
    // 判断状态 来调用回调函数
    switch (this.status) {
      case FULFILLED: // 通过
        successCallback(this.data);
        break;
      case REJECTED: // 驳回
        failCallback(this.reason);
        break;
      case FINALLY: // 结束
        finallyCallback();
        break;
      default:
        // 变量记录当前的回调方法  存在异步的执行顺序
        // MyPromise声明 => then方法的调用 => 异步函数返回值调用resolve/reject方法
        this.successCallback = successCallback;
        this.failCallback = failCallback;
        break;
    }
  }
}

尝试调用

let promise = new ClassPromise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 1000);
//   reject("失败");
});
promise.then(
  (val) => {
    console.log(val);
  },
  (reason) => {
    console.log(reason);
  }
);
promise.then(
  (val) => {
    console.log(val);
  },
  (reason) => {
    console.log(reason);
  }
);

// 输出
// 成功


/**
 * 当前promise中异步的处理已经完成,但是一个promise对象可以多次调用then方法,应该怎么做呢?
 */
 

后续整理中.......