Promise（六）手写Promise（主体框架）

已于 2022-05-11 14:04:47 修改
阅读量404 收藏
点赞数
分类专栏： Promise 文章标签： Promise
于 2022-04-28 18:08:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39162041/article/details/124480231
版权
本文详细解析了Promise对象的创建、调用过程以及内部结构，重点介绍了状态转换、数据存储和异步回调的执行机制。通过实例展示了如何使用then和catch方法处理成功和失败情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Promise整体结构

调用部分：

    <script src="./promise.js"></script>
    <script>
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(1) //代表value
                    // reject(2) //代表reason
                    // console.log('reject改变状态之后')
            })

        })
        p.then(
            value => {
                console.log('onResolved1()', value)
            },
            reason => {
                console.log('onRejected1()', reason)
            }
        )
        p.then(
            value => {
                console.log('onResolved2()', value)
            },
            reason => {
                console.log('onRejected2()', reason)
            }
        )
    </script>

Promise部分：

//自定义Promise模块
//匿名函数自调用
(function(parms) {
    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'

    function Promise(excutor) {
        const self = this //将当前promise对象保存起来
        self.status = PENDING //给promise指定status属性，初始值为PENDING
        self.data = undefined //给promise对象指定一个用于存储结果数据的属性、
        self.callbacks = [] //每个元素的结构：{onRESOLVED(){},onREJECTED(){} {}}
            //excutor 执行器函数
        function resolve(value) {
            //如果当前状态不是PENDING，直接结束
            if (self.status != PENDING) {
                return
            }
            //将状态改为RESOLVED
            self.status = RESOLVED;
            //保存value数据
            self.data = value
                //如果有待执行callback函数，立即执行异步回调函数onRESOLVED
            if (self.callbacks.length > 0) {
                setTimeout(() => { //模拟放到队列里执行所有成功后的回调
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value)
                    });
                })
            }
        }

        function reject(reason) {
            //如果当前状态不是PENDING，直接结束
            if (self.status != PENDING) {
                return
            }
            //将状态改为REJECTED
            self.status = REJECTED;
            //保存value数据
            self.data = reason
                //如果有待执行callback函数，立即执行异步回调函数onREJECTED
            if (self.callbacks.length > 0) {
                setTimeout(() => { //模拟放到队列里执行所有成功后的回调
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason)
                    });
                })
            }
        }

        //立即执行执行器函数excutor
        //如果执行器抛出异常，promise变为失败
        try {
            excutor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    //Promise的then方法
    //向外暴露Promise函数

    //Promise函数对象then
    //指定成功的函数
    //返回一个新的Promise对象
    Promise.prototype.then = function(onResolved, onRejected) {
        const self = this
            //指定回调函数的默认值（必须是函数）
        onResolved = typeof onResolved === 'function' ? onResolved : value => value
        onRejected = typeof onRejected === 'function' ? onRejected : reason => reason

        return new Promise((resolve, reject) => {
            function handle(callback) {
                // 执行指定的回调函数
                //根据执行的结果改变return的promise状态
                // 返回promise的结果有onResolved，onRejected执行结果决定
                // 1.抛出异常，返回promise的结果为失败，reason为异常
                try {
                    const result = onResolved(self.data)
                    if (result instanceof Promise) {
                        // result.then(
                        //     value=>resolve(value),
                        //     reason=>reject(reason)
                        //     )
                        result.then(resolve, reject)
                    } else {
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }


            //当前promise状态是resolve
            //当前promise状态是reject
            //当前promise状态是pending
            if (self.status === RESOLVED) {
                setTimeout(() => {
                    handle(onResolved)
                })
            } else if (self.status === REJECTED) {
                setTimeout(() => {
                    handle(onRejected)
                })
            } else { //当前promise的状态是pending
                //将成功和失败的回调函数保存callbacks容器中缓存起来
                self.callbacks.push({
                    onResolved() {
                        handle(onResolved)
                    },
                    onRejected() {
                        handle(onRejected)
                    }
                })
            }

        })
    }

    //Promise函数对象catch
    //指定失败的函数
    //返回一个新的Promise对象
    Promise.prototype.catch = function(onReject) {
        return this.then(undefined, onRejected)
    }

    //Promise函数对象resolve
    //返回一个指定结果成功的Promise
    Promise.resolve = function(value) {

        }
        //Promise函数对象reject
        //返回一个指定结果失败的Promise
    Promise.reject = function(reason) {

        }
        //Promise的all方法
        //返回一个Promise,只有当所有的Promise都成功才成功，否则只要有一个失败的就是失败
    Promise.all = function(promises) {
            const valuse = new Array(promises.length); //用来保存所有成功value的数组
            const cont = 0; //用来保存成功的次数
            return new Promise((resolve, reject) => {
                //遍历获取每一个promise的结果
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(
                        value => {
                            cont++
                            valuse[index] = value
                                //如果全部成功，将return的promise返回成功
                            if (cont == promises.length) {
                                resolve(values)
                            }
                        },
                        reason => { //只要有一个失败直接返回失败
                            reject(reason)
                        }
                    )
                })

            })

        }
        //Promise的race方法
        //返回一个Promise,其结果由第一个完成的Promise结果决定
    Promise.race = function(promises) {
        return new Promise((resolve, reject) => {
            //遍历获取每一个promise的结果
            promises.forEach((p, index) => {
                Promise.resolve(p).then(
                    value => { //一旦有成功了将return的promise变为成功
                        resolve(value)
                    },
                    reason => { //只要有一个失败直接返回失败
                        reject(reason)
                    }
                )
            })
        })
    }


    window.Promise = Promise
})(window)

类的Promise写法：

//自定义Promise模块
//匿名函数自调用
(function(parms) {
    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'

    class Promise {
        constructor(excutor) {
            const self = this //将当前promise对象保存起来
            self.status = PENDING //给promise指定status属性，初始值为PENDING
            self.data = undefined //给promise对象指定一个用于存储结果数据的属性、
            self.callbacks = [] //每个元素的结构：{onRESOLVED(){},onREJECTED(){} {}}
                //excutor 执行器函数
            function resolve(value) {
                //如果当前状态不是PENDING，直接结束
                if (self.status != PENDING) {
                    return
                }
                //将状态改为RESOLVED
                self.status = RESOLVED;
                //保存value数据
                self.data = value
                    //如果有待执行callback函数，立即执行异步回调函数onRESOLVED
                if (self.callbacks.length > 0) {
                    setTimeout(() => { //模拟放到队列里执行所有成功后的回调
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onResolved(value)
                        });
                    })
                }
            }

            function reject(reason) {
                //如果当前状态不是PENDING，直接结束
                if (self.status != PENDING) {
                    return
                }
                //将状态改为REJECTED
                self.status = REJECTED;
                //保存value数据
                self.data = reason
                    //如果有待执行callback函数，立即执行异步回调函数onREJECTED
                if (self.callbacks.length > 0) {
                    setTimeout(() => { //模拟放到队列里执行所有成功后的回调
                        self.callbacks.forEach(callbacksObj => {
                            callbacksObj.onRejected(reason)
                        });
                    })
                }
            }

            //立即执行执行器函数excutor
            //如果执行器抛出异常，promise变为失败
            try {
                excutor(resolve, reject)
            } catch (error) {
                reject(error)
            }
        }

        //Promise的then方法
        //向外暴露Promise函数

        //Promise函数对象then
        //指定成功的函数
        //返回一个新的Promise对象
        then(onResolved, onRejected) {
            const self = this
                //指定回调函数的默认值（必须是函数）
            onResolved = typeof onResolved === 'function' ? onResolved : value => value
            onRejected = typeof onRejected === 'function' ? onRejected : reason => reason

            return new Promise((resolve, reject) => {
                function handle(callback) {
                    // 执行指定的回调函数
                    //根据执行的结果改变return的promise状态
                    // 返回promise的结果有onResolved，onRejected执行结果决定
                    // 1.抛出异常，返回promise的结果为失败，reason为异常
                    try {
                        const result = onResolved(self.data)
                        if (result instanceof Promise) {
                            // result.then(
                            //     value=>resolve(value),
                            //     reason=>reject(reason)
                            //     )
                            result.then(resolve, reject)
                        } else {
                            resolve(result)
                        }
                    } catch (error) {
                        reject(error)
                    }
                }


                //当前promise状态是resolve
                //当前promise状态是reject
                //当前promise状态是pending
                if (self.status === RESOLVED) {
                    setTimeout(() => {
                        handle(onResolved)
                    })
                } else if (self.status === REJECTED) {
                    setTimeout(() => {
                        handle(onRejected)
                    })
                } else { //当前promise的状态是pending
                    //将成功和失败的回调函数保存callbacks容器中缓存起来
                    self.callbacks.push({
                        onResolved() {
                            handle(onResolved)
                        },
                        onRejected() {
                            handle(onRejected)
                        }
                    })
                }

            })
        }

        //Promise函数对象catch
        //指定失败的函数
        //返回一个新的Promise对象
        catch (onReject) {
            return this.then(undefined, onReject)
        }

        //Promise函数对象resolve
        //返回一个指定结果成功的Promise
        static resolve(value) {
                //返回一个成功/失败的promise
                return new Promise((resolve, reject) => {
                    if (value instanceof Promise) { //使用value的结果
                        value.then(resolve, reject)
                    } else { //value不是promise 
                        resolve(value)
                    }
                })
            }
            //Promise函数对象reject
            //返回一个指定结果失败的Promise
        static reject(reason) {
                return new Promise((resolve, reject) => {
                    reject(reason)
                    self.status = REJECTED
                })
            }
            //Promise的all方法
            //返回一个Promise,只有当所有的Promise都成功才成功，否则只要有一个失败的就是失败
        static all(promises) {
                const valuse = new Array(promises.length); //用来保存所有成功value的数组
                const cont = 0; //用来保存成功的次数
                return new Promise((resolve, reject) => {
                    //遍历获取每一个promise的结果
                    promises.forEach((p, index) => {
                        Promise.resolve(p).then(
                            value => {
                                cont++
                                valuse[index] = value
                                    //如果全部成功，将return的promise返回成功
                                if (cont == promises.length) {
                                    resolve(values)
                                }
                            },
                            reason => { //只要有一个失败直接返回失败
                                reject(reason)
                            }
                        )
                    })

                })

            }
            //Promise的race方法
            //返回一个Promise,其结果由第一个完成的Promise结果决定
        static race(promises) {
            return new Promise((resolve, reject) => {
                //遍历获取每一个promise的结果
                promises.forEach((p, index) => {
                    Promise.resolve(p).then(
                        value => { //一旦有成功了将return的promise变为成功
                            resolve(value)
                        },
                        reason => { //只要有一个失败直接返回失败
                            reject(reason)
                        }
                    )
                })
            })
        }

        // 返回一个promise对象，它在指定的时间后才确定结果
        static resolveDelay(value, time) {
            setTimeout(() => {
                return new Promise((resolve, reject) => {
                    reject(reason)
                    self.status = REJECTED
                })
            }, time)

        }

        // 返回一个promise对象，它在指定的时间后才失败
        static rejectDelay(value, time) {
            setTimeout(() => {
                return new Promise((resolve, reject) => {
                    reject(reason)
                })
            }, time)

        }
    }



    window.Promise = Promise
})(window)

主要部分：
1.首先为Promise对象准备三个属性。
（1）status(Promise对象的状态)、
（2）data(Promise对象的数据)、
（3）callbacks(缓存Promise对象的回调函数)
2.调用执行器函数（excutor）,执行器函数调用之前，需要准备两个函数（内部定义好），由外部使用者调用。执行器调用之前要对执行器函数进行异常检测，如果执行器函数异常。则调用reject函数
（1）resolve()
（2）reject()
3.实现resolve()和reject()，先要判断当前的状态，只有resolve和reject才可以进行回调函数的调用。注意，成功和失败的回调函数是异步的，常规都是先指定了回调函数，但是也可以先改变状态，在指定回调函数的（详细可查看我的前几篇文章），所以此处加了缓存回调函数数组的判断。
（1）改变状态
（2）保存数据
（3）异步执行，待执行的回调函数

手写Promise（全面）
qq_55269092的博客
02-25 985
手写Promise（包含测试用例） （1）测试用例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
2023前端二面经典手写面试题
helloworld1024fd的博客
02-27 423
call做了什么: 手写常见排序 快速排序 选择排序 插入排序 实现一个JS函数柯里化 柯里化把多次传入的参数合并，柯里化是一个高阶函数 每次都返回一个新函数 每次入参都是一个 当柯里化函数接收到足够参数后，就会执行原函数，如何去确定何时达到足够的参数呢？有两种思路：将这两点结合一下，实现一个简单 函数通用版 ES6写法 实现bind方法 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 的方式，我们先来说直接调用的方式 对于直接调用来说，这里选择了
ES6从入门到入狱-promise篇
往事不回头,余生不将就
04-10 1万+
ES6之promise 1.什么是Promise? 抽象表达:Promise，是JS进行异步编程的一种新的解决方案 具体表达:从语法上说Promise是一个构造函数， 从功能上说Promise对象是用来封装异步操作并可以获取其结果 2.Promise 状态 promise总共有三个状态，初始化状态为pending， 执行成功状态更改为resolved，执行失败状态更改为rejected co...
全网最全手写promise
最新发布
前端成长之路
04-24 199
手把手实现一个Promise，完美通过promiseA+规范测试用例
【手写Promise】
weixin_49487698的博客
05-16 1万+
一、JS的错误 1、错误的类型 2、错误处理 3、错误对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
手写promise
dtbk123的博客
06-22 311
//promise三种状态（运行中，执行成功，执行失败） const PENDING='pending' const RESOLVE='fulfilled' const REJECTED='rejected' function MyPromise(executor){ this.data=undefined this.Fullcallback=[]//存放成功的回调 this.Failedcallback=[]//存放失败的回调 this.status=PENDIN.
面试框架题整理
热门推荐
Jenius87v5的博客
04-15 2万+
面试题总结 一基础部分 1.1 集合 1.1.1 fail-fast 与 fail-safe 机制有什么区别 1.1.2 说出ArrayList,Vector, LinkedList的存储性能和特性 ArrayList 采用的是数组形式来保存对象的，这种方式将对象放在连续的位置中，所以最大的缺点就是插入删除时非常麻烦 LinkedList 采用的将对象存放在独立的空间中，而且在每个空间中还保存下一个链接的索引 但是缺点就是查找非常麻烦 要丛第一个索引开始 ArrayList和Vector都是用数组方
阿里前端常考面试题汇总
loveX001的博客
09-17 447
阿里前端常考面试题汇总
京东前端常考面试题（附答案）
m0_67614517的博客
09-13 1391
京东前端常考面试题（附答案）
手写Promise
XunLin233的博客
05-30 2106
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
掌握JavaScript中的makeIterator函数实现遍历器
标题“js代码-手写makeIterator遍历器”与描述“js代码-手写makeIterator遍历器”相同，表明文档的主体内容会聚焦于JavaScript（简称JS）中一个特定功能的实现，即自定义一个名为makeIterator的函数，该函数能够创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

画不完的饼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值