JavaScript 进阶 41 -- Promise 手写简单的源码

前面的一篇说了说Promise的基本用法和常用的方法。知道了Promise的实现原理，我来自己试着谢谢源码

先看看promise是怎么用的

【 例 】

let p = new Promise((resolve,reject)=>{
    //同步代码先执行，异步代码先放着，此时是等待状态
    console.log('先执行同步的')
    setTimeout(() => {
        resolve('异步执行成功'); 
    }, 1000);
    
})
p.then((value)=>{
    //成功时
    console.log('恭喜',value);//恭喜 成功了
},(reason)=>{
    //失败时
    console.log('失败了',reason);//失败了 不努力
})

先来实现上面这段代码吧 ，对照上面此代码 写出原生promise 文件：Promise.js，先来说说它的思路吧：

调用resolve时 走成功回调函数，调用reject时 走失败回调函数， resolve 和 reject 这两个函数改变的是promise的状态，只能 从 pending ---->fulfilled 或者 pending---->rejected，不能成功态转为失败态，或者失败态转成功态。在状态改变的同时将结果传递出去，resolve()传递成功的数据，reject() 传递失败的数据。then() 方法接收两个参数，一个是 调resolve时传递成功的值，一个是调用reject时传递的失败的数据。根据已经发生改变的状态决定执行哪个回调

【 超级简洁版 -1 】文件名：Promise.js 。测试这个文件是否正确呢 ，

//定义三种状态
const PENDING = 'PENDING';
const RESOLVE = 'RESOLVE';
const REJECT = 'REJECT';

//Promise是个类
class Promise {
    constructor(executor){

        //初始状态---静待状态
        this.status = PENDING;

        this.value = undefined;//记录成功的值
        this.reason = undefined;//记录失败的原因

        //这是异步的  先执行同步代码,异步的处于等待状态 发布订阅模式--->订报纸，报纸发放到信箱，看报纸时从信箱取出报纸
        this.resolveCallbacks = [];//先保存起来，待执行时从数组中取出 相当于信箱
        this.rejectCallbacks = []; // 发报纸放到信箱，看报纸时从信箱取出来

        let resolve = (value)=>{
            if(this.status === PENDING){
                this.status = RESOLVE;
                this.value = value;
                // 发布（收到报纸以后）将来调用成功时将值取出来
                this.resolveCallbacks.forEach(fn=>fn(this.value))
            }
        }
        let reject = (reason)=>{
            if(this.status === PENDING){
                this.status = REJECT;
                this.reason = reason;
                this.rejectCallbacks.forEach(fn=>fn(this.reason))
            }
        }
        //如果代码出错了就抛出异常，走reject并捕获错误
        try{
            executor(resolve,reject);
        }catch(e){
            reject(e);
        }
        
    }
    //resolve,reject 不是实例上自带的方法 ，是自己定义法的方法
    //每个实例都有then方法，是原型上的
    then(onfulfilled,onrejected){
        if(this.status === RESOLVE){
            onfulfilled(this.value)
        }
        if(this.status === REJECT){
            on