手写promise

promise 主要用对异步代码转同步的一种方式，同时也解决了回调地狱的问题，在之后也有async await的方法

promise的有三种状态

• Pending（进行中） : 初始状态，异步操作尚未完成，也未失败

• Fulfilled（已完成） : 异步操作成功完成，Promise 的结果可用

• Rejected（已失败） : 异步操作失败，Promise 的结果不可用

  注：promise状态一经更改就不可以再变化

1.简易的promise对象

    // 手写一个 promise
    class Promise {
        // 使用 constructor 来下定义入参
        // executor 表示promise中的回调函数
        constructor(executor) {
            // 定义成功的成功的回调
            let resolve = () => {
                console.log("将状态改为成功，并调用成功的回调，记录成功的信息");
            }
            // 定义成功的失败的回调
            let reject = () => {
                console.log("将状态改为失败，并调用失败的回调，记录失败的信息");
            }
            // 定义promise的入参
            executor(resolve, reject)
        }
    }

    // 调用 promise
    let p = new Promise((resolve, reject) => {
        console.log("立即执行");
        // 调用成功的回调
        resolve()
    })

2.加入状态的（fulfilled 成功、rejected 失败）

    // 手写一个 promise
    class Promise {
        // 使用 constructor 来下定义入参
        // executor 表示promise中的回调函数
        constructor(executor) {

            this.state = "pending" //初始化state状态为等待状态
            this.value = undefined //记录成功的值
            this.reason = undefined //记录失败的值

            // 定义成功的成功的回调
            let resolve = (value) => {
                console.log("将状态改为成功，并调用成功的回调，记录成功的信息");
                // 只有在初始状态为pending才能修改状态
                if (this.state === "pending") {
                    this.state = "fulfilled"
                    this.value = value
                }
            }

            // 定义成功的失败的回调
            let reject = (value) => {
                console.log("将状态改为失败，并调用失败的回调，记录失败的信息");
                // 只有在初始状态为pending才能修改状态
                if (this.state === "pending") {
                    this.state = "rejected"
                    this.reason = value
                }
            }
            
            // 定义promise的入参
            executor(resolve, reject)
        }
    }

    // 调用 promise
    let p = new Promise((resolve, reject) => {
        console.log("立即执行");
        // 调用成功的回调
        resolve()
    })

3.处理 .then 方法和异步处理+并行执行

 // 手写一个 promise
    class Promise {
        // 使用 constructor 来下定义入参
        // executor 表示promise中的回调函数
        constructor(executor) {

            this.state = "pending" //初始化state状态为等待状态
            this.value = undefined //记录成功的值
            this.reason = undefined //记录失败的值

            this.onResolvedCallback = [] // 存放成功时，需要执行的函数列表
            this.onRejectedCallback = [] // 存放当失败时，需要执行的函数列表

            // 定义成功的成功的回调
            let resolve = (value) => {
                console.log("将状态改为成功，并调用成功的回调，记录成功的信息");
                // 只有在初始状态为pending才能修改状态
                if (this.state === "pending") {
                    this.state = "fulfilled"
                    this.value = value
                    // 调用成功的数组中的函数需要便利执行
                    this.onResolvedCallback.forEach(fn => fn())
                }
            }

            // 定义成功的失败的回调
            let reject = (value) => {
                console.log("将状态改为失败，并调用失败的回调，记录失败的信息");
                // 只有在初始状态为pending才能修改状态
                if (this.state === "pending") {
                    this.state = "rejected"
                    this.reason = value
                    // 调用失败的数组中的函数需要便利执行
                    this.onRejectedCallback.forEach(fn => fn())
                }
            }

            // 定义promise的入参
            executor(resolve, reject)
        }

        then(onFulfilled, onRejected) {
            // 成功
            if (this.state == "fulfilled") {
                onFulfilled(this.value)
            }

            // 失败
            if (this.state == "rejected") {
                onRejected(this.value)
            }

            // 初始
            if (this.state == "pending") {
                // 若还处于初始的时候就将接下来的事情保存起来
                this.onResolvedCallback.push(() => {
                    onFulfilled(this.value)
                })
                this.onRejectedCallback.push(() => {
                    onRejected(this.value)
                })
            }
        }
    }

    // 调用 promise
    let p = new Promise((resolve, reject) => {
        console.log("立即执行");
        // 调用成功的回调
        resolve("成功")
    })

    console.log(p, "此时 promise 的状态");

4.promise 的链式调用

    // 手写一个 promise
    class Promise {
        // 使用 constructor 来下定义入参
        // executor 表示promise中的回调函数
        constructor(executor) {

            this.state = "pending" //初始化state状态为等待状态
            this.value = undefined //记录成功的值
            this.reason = undefined //记录失败的值

            this.onResolvedCallback = [] // 存放成功时，需要执行的函数列表
            this.onRejectedCallback = [] // 存放失败时，需要执行的函数列表

            // 定义成功的成功的回调
            let resolve = (value) => {
                console.log("将状态改为成功，并调用成功的回调，记录成功的信息");
                // 只有在初始状态为pending才能修改状态
                if (this.state === "pending") {
                    this.state = "fulfilled"
                    this.value = value
                    // 调用成功的数组中的函数需要便利执行
                    this.onResolvedCallback.forEach(fn => fn())
                }
            }

            // 定义成功的失败的回调
            let reject = (value) => {
                console.log("将状态改为失败，并调用失败的回调，记录失败的信息");
                // 只有在初始状态为pending才能修改状态
                if (this.state === "pending") {
                    this.state = "rejected"
                    this.reason = value
                    // 调用失败的数组中的函数需要便利执行
                    this.onRejectedCallback.forEach(fn => fn())
                }
            }

            // 定义promise的入参
            executor(resolve, reject)
        }

        then(onFulfilled, onRejected) {
            return new Promise((resolve, reject) => {
                // 成功
                if (this.state == "fulfilled") {
                    // 调用成功的方式
                    let p2 = onFulfilled(this.value)
                    // 判断 返回值是否是一个promise
                    if (p2 instanceof Promise) {
                        // 如果是则进行链式调用
                        p2.then(resolve, reject)
                    }
                }

                // 失败
                if (this.state == "rejected") {
                    // 调用失败的方式
                    let p2 = onRejected(this.value)
                    // 判断 返回值是否是一个promise
                    if (p2 instanceof Promise) {
                        // 如果是则进行链式调用
                        p2.then(resolve, reject)
                    }
                }

                // 初始
                if (this.state == "pending") {
                    // 若还处于初始的时候就将接下来的事情保存起来
                    this.onResolvedCallback.push(() => {
                        onFulfilled(this.value)
                    })
                    this.onRejectedCallback.push(() => {
                        onRejected(this.value)
                    })
                }
            })
        }
    }

    // 调用 promise
    let p = new Promise((resolve, reject) => {
        console.log("立即执行");
        // 调用成功的回调
        resolve("成功")
    })

    console.log(p, "此时 promise 的状态");

本人对此的理解就是这些，希望对小伙伴有所帮助。