手写promise

前端小白，记录学习过程，简易版实现promise，欢迎批评指教，笔芯～❤️

实现一个简易版本的promise

首先用文字说一下实现promise的流程

1. 创建一个构造函数，传入fn，因为可能会有异步操作，所以定义一个that用来保存this，确保this的正确指向
2. 定义一个value = null 用来保存resolve和reject传入的value
3. 定义两个容器，用来保存state='resolved'的callback列表、state='reject'的callback列表
4. 实现resolve，改表state为resolved，将成功处理函数列表遍历执行
5. 实现reject，改表state为rejected，将失败处理函数列表遍历执行
6. 执行promise中传入的函数，需要注意的要有异常判断，捕获异常后执行reject
7. 重点： 实现.then方法

• then接收两个参数（onFulfilled<成功>，onFailed<失败>）
• 判断onFulfilled是否是个函数，是则返回onFulfilled，不是返回一个新函数 v => v
• 判断onFailed是否是个函数，是则返回onFulfilled，不是则返回 err => { throw err }
• 判断state状态，state=pending时，将onFulfilled放入成功处理函数列表容器中，将inFailed放入失败处理函数列表容器中
• state='resolved'时，执行onFulfilled
• state='rejected'时，执行onFailed

翠花～ 上代码：

    function MyPromise(fn){
        const that = this;
        that.state = "PENDING"
        that.value = null
        that.resolvedCallbacks = []
        that.rejectedCallbacks = []
        // 实现resolve
        function resolve(value){
            <!-- 当state的状态时PENDING时，才能改变state的状态（promise/A+规范） -->
            if(that.state === 'PENDING'){
                that.state = 'RESOLVED'
                that.value = value
                that.resolvedCallbacks.map( cb => cb(that.value))
            }
        }
        // 实现rejected
        function reject(value){
            if(that.state === 'PENDING'){
                that.state = 'REJECTED'
                that.value = value
                that.rejectedCallbacks.map( cb => cb(that.value) )
            }
        }
        // 执行promise传入的两个函数
        try{
           fn(resolve,reject) 
        }catch (e) {
            reject(e)
        }
    }
    MyPromise.protoType.then = function(onFulfilled,onFailed){
        const that = this
        onFulfilled = typeOf onFulfilled === 'function' ? onFulfilled : v=> v
        onFailed = typeOf onFailed === 'function' ? onFailed : r => { throw r }
        if(that.state === 'PENDING'){
            that.resolvedCallbacks.push(onFulfilled)
            that.rejectedCallbacks.push(onFailed)
        }
        if(that.state === 'RESOLVED'){
            onFulfilled(that.value)
        }
        if(that.state === 'REJECTED'){
            onFailed(that.value)
        }
    }
    <!-- 测试写的这个promise -->
    new MyPromise((resolve,reject)=>{
        // resolve("MyPromise --- You Are Right")
        reject("MyPromise --- You Are Error")
    })
    MyPromise.then(
        res => {
            console.log(res)
        },
        rej => {
            console.log(rej)
        }
    )