实现一个简单的Promise

先看一下promise的使用

const pe = new MyPromise((resolve, reject) => {
  const acount = 10;
  if (acount > 5) {
    resolve("我大于5");
  } else {
    reject("我小于5");
  }
});
pe.then(data => {
  console.log("使用then", data);
});

先定义类MyPromise，构造函数入参是一个回调函数，回调函数的两个参数也是两个函数

class MyPromise {
  constructor(callback) {
    callback(
      () => {}, // resolve
      () => {} // reject
    );
  }
}

加入状态控制

class MyPromise {
  constructor(callback) {
    this.state = "pending";
    callback(
      // resolve
      () => {
        this.state = "fulfilled";
      },
      // reject
      () => {
        this.state = "rejected";
      }
    );
  }
}

加入then，then的参数是两个回调函数，分别为resolve和reject

class MyPromise {
  constructor(callback) {
    this.state = "pending";
    callback(
      // resolve
      () => {
        this.state = "fulfilled";
      },
      // reject
      () => {
        this.state = "rejected";
      }
    );
  }

  then(resolve, reject) {
    if (this.state === "fulfilled") {
      resolve();
    } else if (this.state === "rejected") {
      reject();
    }
  }
}

then可以取到resolve和reject传入的数据

class MyPromise {
  constructor(callback) {
    this.state = "pending";
    this.resolveData = null // 传入的数据
    this.rejectData = null // 传入的数据
    callback(
      // resolve
      (resolveData) => {
        this.state = "fulfilled";
        this.resolveData = resolveData
      },
      // reject
      (rejectData) => {
        this.state = "rejected";
        this.rejectData = rejectData
      }
    );
  }

  then(resolve, reject) {
    if (this.state === "fulfilled") {
      resolve(this.resolveData);
    } else if (this.state === "rejected") {
      reject(this.rejectData);
    }
  }
}

加入异步机制

class MyPromise {
  constructor(callback) {
    this.state = "pending";
    this.resolveData = null;
    this.rejectData = null;
    this.quequ = [] // 事件队列
    callback(
      // resolve
      resolveData => {
        setTimeout(() => {
          this.state = "fulfilled";
          this.resolveData = resolveData;
          // 异步事件触发
          for (const item of this.quequ) {
            item.resolve(resolveData)
          }
        }, 500);
      },
      // reject
      rejectData => {
        this.state = "rejected";
        this.rejectData = rejectData;
        // 异步事件触发
        for (const item of this.quequ) {
          item.reject(rejectData)
        }
      }
    );
  }

  then(resolve, reject) {
    if (this.state === "fulfilled") {
      resolve(this.resolveData);
    } else if (this.state === "rejected") {
      reject(this.rejectData);
    } else {
      // 暂存异步事件，状态变化后调用
      this.quequ.push({
        resolve,
        reject
      })
    }
  }
}

实现链式调用

class MyPromise {
  constructor(callback) {
    this.state = "pending";
    this.resolveData = null;
    this.rejectData = null;
    this.quequ = [];
    callback(
      // resolve
      resolveData => {
        setTimeout(() => {
          this.state = "fulfilled";
          this.resolveData = resolveData;
          for (const item of this.quequ) {
            item.res(item.resolve(resolveData)); // 拿到then的返回值并触发下个状态
          }
        }, 500);
      },
      // reject
      rejectData => {
        this.state = "rejected";
        this.rejectData = rejectData;
        for (const item of this.quequ) {
          item.reject(rejectData);
        }
      }
    );
  }

  then(resolve, reject) {
  	// 返回一个promise
    return new MyPromise((res, rej) => {
      if (this.state === "fulfilled") {
        res(resolve(this.resolveData)); // 拿到then的返回值并触发下个状态
      } else if (this.state === "rejected") {
        reject(this.rejectData);
      } else {
        this.quequ.push({
          resolve,
          reject,
          res // 暂存，异步触发时使用
        });
      }
    });
  }
}

一个简单的Promise就完成了，试一下效果

const pe = new MyPromise((resolve, reject) => {
  const acount = 10;
  if (acount > 5) {
    resolve("我大于5");
  } else {
    reject("我小于5");
  }
});
pe.then(data => {
  console.log("使用then", data);
  return "aaa";
}).then(data => {
  console.log("使用then1", data);
  return "bbb";
}).then(data => {
  console.log("使用then2", data);
});

// 使用then 我大于5
// 使用then1 aaa
// 使用then2 bbb