手动实现Promise#

new Promise( function(resolve, reject) { /* executor */
    // 执行代码 需要指明resolve与reject的回调位置
});

// 定义_Promise构造函数 
function _Promise(fn) {
    this.status = "pending"; // 定义属性存储状态 // 赋予初始状态pending
    this.value = null; // resolve的value
    this.reason = null; // reject的reason
    this.onFulfilled = []; // 存储then方法中注册的第一个回调函数
    this.onReject = []; // 存储then方法中注册的第二个回调函数
    
    var handler = funct => { // 事件处理函数
        if(typeof(funct) === "function") { // 如果是函数的话才进行执行
            if(this.status === "fulfilled") funct(this.value); // 执行并传递value
            if(this.status === "rejected") funct(this.reason); // 执行并传递rejected
        }
    }
    
    // 实现resolve回调
    var resolve = value => { // 使用箭头函数主要是为了绑定this指向
        this.status = "fulfilled"; // 设置状态
        this.value = value; // 得到结果
        if(value instanceof _Promise){ // 判断返回的值是否为Promise实例
            value.onFulfilled = this.onFulfilled; // 是则以此链式调用
            return value;
        } 
        setTimeout(() => { // 使用setTimeout是为了将回调函数置于任务队列，不阻塞主线程，异步执行，实际promise的回调是置于微队列的，而setTimeout的回调是置于宏队列
            try {
                this.onFulfilled.forEach(handler); // 交予事件处理
            }catch (e){
                console.error(`Error in promise: ${e}`); // 打印异常
                reject(e); // reject
            }
        }, 0)
    }
    
    // 实现rejected
    var reject = reason => { // 使用箭头函数主要是为了绑定this指向
        this.status = "rejected"; // 设置状态
        this.reason = reason; // 得到结果
        setTimeout(() => { // 置于任务队列
            try {
                this.onReject.forEach(handler); // 交予事件处理
            }catch (e){
                console.error(`Error in promise: ${e}`); // 打印异常
            }
        }, 0)
    }
    
    fn(resolve, reject); // 执行
}

// 定义then
// value接收上层结果 --- function处理自身逻辑 --- return传递到下层
_Promise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v; // 转为函数
    onRejected = typeof onRejected === 'function' ? onRejected : r => r; // 转为函数
    return new _Promise((resolve, reject) => { // 返回一个新的_Promise
        this.onFulfilled.push((value) => { // 将回调函数置于onFulfilled
            resolve(onFulfilled(value)); // 执行并传递
        });
        this.onReject.push((value) => { // 将回调函数置于onReject
            reject(onRejected(value)); // 执行并传递
        });
    })
}

// 测试
var promise = new _Promise(function(resolve,reject){
     var rand = Math.random() * 2;
      setTimeout(function(){
         if(rand < 1) resolve(rand);
         else reject(rand);
     },1000)
})
promise.then((rand) => {
    console.log("resolve",rand); // resolve回调执行
}, (rand) => {
    console.log("reject",rand); // reject回调执行
}).then(function(){ // resolve后继续执行
    return new _Promise(function(resolve,reject){
     var rand = Math.random() * 2;
      setTimeout(function(){
         resolve(rand);
     },1000)
})
}).then(function(num){ // resolve后继续执行
    console.log(num,"继续执行并接收参数");
    return 1;
}).then(function(num){
    console.log(num,"继续执行并接收参数");
})

/*
  实现的_Promise比较简单
  实际使用的Promise比较复杂，有各种情况的考虑
  例子中仅实现了Promise构造函数与then，实际中还有catch、Promise.all、Promise.race、Promise.resolve、Promise.reject等实现
 */