Promise的实现

叁歲伎倆 2022-11-29 05:36 158阅读 0赞

const PENDING = 'pending';
        const RESOLVED = 'resolved';
        const REJECTED = 'rejected';
        
        function Promise(executor) { 
            const that = this
            // 三个属性
            that.status = PENDING //Promise对象状态属性，初始状态为 pending
            that.data = undefined // 用于存储结果数据
            that.callbacks = [] //保存待执行的回调函数 ，数组元素的数据结构：{onResolved(){},onRejected(){}}
    
            function resolve(value) { 
                // RESOLVED 状态只能改变一次
                if (that.status !== PENDING) { 
                    return
                }
                that.status = RESOLVED
                that.data = value
                //执行异步回调函数 onResolved
                if (that.callbacks.length > 0) { 
                    setTimeout(() => {  // 放入队列中执行所有成功的回调
                        that.callbacks.forEach(callbackObj => { 
                            // 在callbacks数组里面的元素是以对象形式保存的，对象里面包含onResolved和onRejected两个函数，故在调用时采用 item.onResolved(value) 或者 item.onRejected(reason) 方式调用即可
                            callbackObj.onResolved(value)
                        })
                    })
                }
            }
    
            function reject(seaon) { 
                // REJECTED 状态只能改变一次
                if (that.status !== PENDING) { 
                    return
                }
                that.status = REJECTED
                that.data = seaon
                //执行异步回调函数 onRejected
                if (that.callbacks.length > 0) { 
                    setTimeout(() => {  // 放入队列中执行所有失败的回调
                        that.callbacks.forEach(callbackObj => { 
                            callbackObj.onRejected(seaon)
                        })
                    })
                }
            }
    
            try {  //执行器函数立即执行
                executor(resolve, reject)
            } catch (e) { 
                reject(e)
            }
        }
    
        //Promise原型对象 then ,两个回掉函数 成功 onResolved ，失败onRejected
        //返回一个新的Promise对象
        Promise.prototype.then = function (onResolved, onRejected) { 
            onResolved = typeof onResolved === 'function' ? onResolved : value => value // 向后传递成功的value
            // 指定默认的失败的回调(实现错误/异常传透的关键点)
            onRejected = typeof onRejected === 'function' ? onRejected : reason => { 
                throw reason
            } // 抽后传递失败的reason
            const that = this
            return new Promise((resolve, reject) => { 
    
                //调用指定回调函数处理, 根据执行结果, 改变return的promise的状态
                function handle(callback) {  // 封装一个函数
                    // 调用成功的回调函数 onResolved
                    //1.如果抛出异常，return的promise就 会失败，reason就 是error 可以用 try……catch来实现
                    //2.如果回调函数返回不是promise, return的promise就 会成功，value就是返回的值
                    //3.如果回调函数返回是promise, return的promise结 果就是这个promise的结果
                    try { 
                        const result = callback(that.data);
                        if (result instanceof Promise) {   
                            // 如果回调函数返回是promise, return的promise结 果就是这个promise的结果
                            result.then(
                                value => resolve(value), 
                                reason => reject(reason)
                            )
                        } else {  // 如果回调函数返回不是promise, return的promise就 会成功，value就是返回的值
                            resolve(result)
                        }
                    } catch (e) { 
                        reject(e)
                    }
                }
    
                // 当前状态还是pending状态, 将回调函数保存起来
                if (that.status === PENDING) { 
                    that.callbacks.push({  // 以对象形式存在数组里面
                        onResolved(){ onResolved(that.data)},
                        onRejected(){ onRejected(that.data)}
                    })
                } else if (that.status === RESOLVED) { 
                    setTimeout(() => { 
                        handle(onResolved)
                    })
                } else { 
                    setTimeout(() => { 
                        //调用失败的回调函数 onRejected
                        handle(onRejected)
                    })
                }
            })
        }
    
        //Promise原型对象 catch ,参数为失败的回掉函数 onRejected
        //返回一个新的Promise对象
        Promise.prototype.catch = function (onRejected) { 
            return this.then(undefined, onRejected)
        }
    
        // Promise函数对象的 resolve 方法
        //返回一个新的Promise对象,Promise.resolve()中可以传入Promise
        Promise.resolve = function (value) { 
            return new Promise((resolve, reject) => { 
                if (value instanceof Promise) { 
                    value.then(resolve, reject)
                } else { 
                    resolve(value)
                }
            })
        }
    
        // Promise函数对象的 reject 方法
        //返回一个新的Promise对象 Promise.reject中不能再传入Promise
        Promise.reject = function (reason) { 
            return new Promise((resolve, reject) => { 
                reject(reason)
            })
        }
    
        // Promise函数对象的 all 方法,接受一个promise类型的数组
        // 返回一个新的Promise对象
        Promise.all = function (promises) { 
            // 保证返回的值得结果的顺序和传进来的时候一致
            // 只有全部都成功长才返回成功
            const values = new Array(promises.length) // 指定数组的初始长度
            let successCount = 0
            return new Promise((resolve, reject) => { 
                promises.forEach((p, index) => {  // 由于p有可能不是一个Promise
                    Promise.resolve(p).then(
                        value => { 
                            successCount++
                            values[index] = value
                            if (successCount === promises.length) { 
                                resolve(values)
                            }
                        },
                        // 如果失败
                        reason => { 
                            reject(reason)
                        })
                })
            })
    
        }
        // Promise函数对象的 race 方法,接受一个promise类型的数组
        // 返回一个新的Promise对象
        Promise.race = function (promises) { 
            return new Promise((resolve, reject) => { 
                promises.forEach(p => { 
                    Promise.resolve(p).then(
                        value => { 
                            resolve(value)
                        }, reason => { 
                            reject(reason)
                        })
                })
            })
    
        }

以下是关于Promise的一些题目：  
转载：[要就来45道Promise面试题一次爽到底][45_Promise]

[45_Promise]: https://mp.weixin.qq.com/s?__biz=MzU5NDM5MDg1Mw==&mid=2247484225&idx=1&sn=b1d26191a41b9a3961f6798d1218fd79&chksm=fe00b96bc977307d2eab27dbd25bf6d27194d7fcdd9d9515822639b0206ad6ca1f946a0de7a9&token=1408690735&lang=zh_CN#rd

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关手动实现Promise.all

想要实现Promise.all()功能，关键点 / 1、接受一个数组作为参数，或者具有 Iterator 接口的参数 2、参数支持Promise对

短命女/ 2022年12月29日 12:55/ 0 赞/ 117 阅读

相关手写promise，实现一个简易的promise

文案没编辑好，先上代码吧 const isFunction = variable => typeof variable === 'function'

港控/mmm°/ 2022年11月30日 12:41/ 0 赞/ 218 阅读

相关 Promise的实现

const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECT

叁歲伎倆/ 2022年11月29日 05:36/ 0 赞/ 159 阅读

相关 javascript 实现取消promise

Javascript 中，本身promise是不支持取消的，但是有时候，我们有些需求，希望能够取消。我们可以对异步请求进行封装，通过强制调用其reject，达到类似的取消操作。

绝地灬酷狼/ 2022年11月16日 00:56/ 0 赞/ 588 阅读

相关 promise.all的实现 es6

> |`Promise.all(iterable)`方法返回一个 \[`Promise`\]，此实例在 `iterable` 参数内所有的 `promise` 都“完成（res

左手的ㄟ右手/ 2022年11月08日 14:12/ 0 赞/ 94 阅读

相关 Promise实现的基本原理（一）

前言前几天在项目中遇到回调地狱的情况，但我在刚开始写这个项目的时候还不会用Promise，只知道它可以用来解决回调地狱，所以就用全都用回调函数解决。我是看《深入理解ES

拼搏现实的明天。/ 2022年10月01日 10:51/ 0 赞/ 140 阅读

相关 Promise简单实现

Promise 看了些promise的介绍，还是感觉不够深入，这个在解决异步问题上是一个很好的解决方案，所以详细看一下，顺便按照自己的思路实现一个简单的Promise。

末蓝、/ 2022年07月16日 01:18/ 0 赞/ 163 阅读

相关 Promise 实现队列

实现队列有时候我们不希望所有动作一起发生，而是按照一定顺序，逐个进行。 let promise=doSomething(); promise = prom

古城微笑少年丶/ 2022年03月09日 03:35/ 0 赞/ 193 阅读

相关 Promise的实现原理

一· 什么是Promise Promise是抽象异步处理对象以及对其进行各种操作的组件。其实这样说起来还是比较抽象，那么我们简单的理解就是，处理异步操作通常是使

女爷i/ 2022年01月20日 01:13/ 0 赞/ 164 阅读

相关 promise 实现红绿灯

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ゞ浴缸里的玫瑰/ 2022年01月09日 04:49/ 0 赞/ 196 阅读