Promise相关与手写Promise浅度解析

手写Promise，这一问题几乎成了近年来面试中必问的一道题，笔者之前非常苦恼背诵此类内容，硬背八股文无疑是非常痛苦的，后来将内容进行解析拆分后豁然开朗，故此特与大家分享

想要进行手写Promise，首先需要了解以下的几个问题
1. Promise有哪些状态？对应值有哪些？
2. new Promise的执行器exector（）接收的参数是什么
3. Promise保存成功状态的value枚举是什么
4. Promise保存失败的状态是什么？
5. Promise的默认状态是什么？流转状态是怎么样的？
6. Promise一定会有then，then的接收来源是什么？

接下来我们来进行逐条解答与伴随着解答步骤进行手写Promise

首先第一个问题，Promise有三种状态，对应值是pending、fulfilled、rejected

//声明要使用的三个状态
const PENDING = 'PENDING'
const FULFLLED = 'FULFLLED'
const REJECTED = 'REJECTED'
class Promise { 
   constructor(executor) { //构造
   }
}

第二个问题，new Promise执行器exector()接受的参数是resovle与reject

//声明要使用的三个状态
const PENDING = 'PENDING'
const FULFLLED = 'FULFLLED'
const REJECTED = 'REJECTED'
class Promise { 
    constructor(executor) { //构造
       //创立执行器
       try {
           executor(resolve, reject)
       } catch (error) {
           reject(error)
       }
   }

}

第三个问题，promise保存成功状态value的枚举是

undefined
thenable
promise
默认值是undefined

 //声明要使用的三个状态
const PENDING = 'PENDING'
const FULFLLED = 'FULFLLED'
const REJECTED = 'REJECTED'
class Promise { 
     constructor(executor) { //构造
        // 成功的值
        this.value = undefined
        //成功状态的回调
        let resolve = value => {
        }
        //创立执行器
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }

}

第四个问题，promise保存失败状态是reason，默认是undefined

 //声明要使用的三个状态
const PENDING = 'PENDING'
const FULFLLED = 'FULFLLED'
const REJECTED = 'REJECTED'
class Promise { 
     constructor(executor) { //构造
        // 成功的值
        this.value = undefined
        // 失败的值
        this.reason = undefined
        //成功状态的回调
        let resolve = value => {
        }
        //失败状态的回调
        let reject = reason => {
        }
        //创立执行器
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }

}

第五个问题，promise的默认状态是panding，流转时为单向的由panding到fulfilled或rejected

//声明要使用的三个状态
const PENDING = 'PENDING'
const FULFLLED = 'FULFLLED'
const REJECTED = 'REJECTED'
class Promise { 
    constructor(executor) { //构造
       //默认状态处理 PENDING
       this.status = PENDING
       // 成功的值
       this.value = undefined
       // 失败的值
       this.reason = undefined
       //成功状态的回调
       let resolve = value => {
           if (this.status === PENDING) {
               this.status = FULFILLED
               this.value = value
           }
       }
       //失败状态的回调
       let reject = reason => {
           if (this.status === PENDING) {
               this.state = REJECTED
               this.reason = reason
           }
       }
       //创立执行器
       try {
           executor(resolve, reject)
       } catch (error) {
           reject(error)
       }
   }

}

最后一个问题，then的接收来源为两个回调函数

onFulfilled,会流转到成功，对应value
onRejected，会流转到失败，对应reason

//三个状态 PENDING FULFLLED REJECTED
const PENDING = 'PENDING'
const FULFLLED = 'FULFLLED'
const REJECTED = 'REJECTED'

class Promise { //类
    constructor(executor) { //构造
        //默认状态处理 PENDING
        this.status = PENDING
        // 成功的值
        this.value = undefined
        // 失败的值
        this.reason = undefined
        //成功状态的回调
        let resolve = value => {
            if (this.status === PENDING) {
                this.status = FULFILLED
                this.value = value
            }
        }
        //失败状态的回调
        let reject = reason => {
            if (this.status === PENDING) {
                this.state = REJECTED
                this.reason = reason
            }
        }

        //创立执行器
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }

    then(onFulfilled, onRejected) {
        if (this.status === FULFLLED) {
            onFulfilled(this.value)
        }
        if (this.status === REJECTED) {
            onRejected(this.reason)
        }
    }

}

以上便为最简单的同步promise情况下的手写代码，异步情况我将尽快为补充文章进行解析

最后编辑于：2022.04.01 23:58:32