Promise（二）then的原理

Promise.then 函数接受两个函数，第一个函数执行成功回调(onResolve)，第二个函数执行错误回调(onRejected)，并且返回的是一个Promise对象

分析

1.then 对接的是“.”前的promise对象 p1

2.onResolve是在p1为‘resolve’时候执行，onRejected是在p1为‘rejected’时候执行，故和p1的状态有关系，所以有可能是一个异步或者是一个同步执行（同步执行代表p1的状态已经改变了，不为‘pending’，比如:new时候执行resolve）

3.onResolve/onRejected 或者返回的是一个新的promise时候，这次的执行结果一定和新的promise相关。

代码

function Promise(fun) {  // promise的状态  this.promiseState = "pending";  // promise的结果  this.promiseResult = null;  // 存放异步回调  this.callbackList = [];  const resolve = (val) => {    if (this.promiseState !== "pending") return;    this.promiseState = "fulfilled";    this.promiseResult = val;    console.log("this.callbackList: ", this.callbackList);    for (let index = 0; index < this.callbackList.length; index++) {      const element = this.callbackList[index];      element.onResolve(val);    }  };  const reject = (err) => {    if (this.promiseState !== "pending") return;    this.promiseState = "rejected";    this.promiseResult = err;    for (let index = 0; index < this.callbackList.length; index++) {      const element = this.callbackList[index];      element.onRejected(err);    }  };  try {    fun(resolve, reject);  } catch (error) {    reject(error);  }}Promise.prototype.then = function (onResolve, onRejected) {  const self = this;  //返回一个promise  return new Promise((resolve, reject) => {    const handleCallback = (callback) => {      try {        //onResolve 或者onRejected执行时候可能返回一个promise对象        const res = callback(self.promiseResult);        //返回的是promise        if (res instanceof Promise) {          res.then(            (val) => {              resolve(val);            },            (err) => {              reject(err);            }          );        } else {          // 返回的不是          resolve(res);        }      } catch (error) {        reject(error);      }    };        if (self.promiseState === "pending") {    // 异步时候放在回调里面执行      self.callbackList.push({        onResolve: () => {          handleCallback(onResolve);        },        onRejected: () => {          handleCallback(onRejected);        },      });    }    //同步时候之执行    if (self.promiseState === "fulfilled") {      console.log("self.promiseState: ", self.promiseState);      handleCallback(onResolve);    }    if (self.promiseState === "rejected") {      handleCallback(onRejected);    }  });};

测试代码

                            

Promise构造函数

    

      Promise接受一个函数，该函数接受两个参数，两个参数可以改变promise的状态promiseState，状态一旦改变，不允许再次改动了