promise原理:代码实现

痛定思痛。 2022-12-06 15:39 132阅读 0赞

基础代码

(function (window) { 
        const PENDING = 'pending'
        const RESOLVED = 'resolved'
        const REJECTED = 'rejected'
    
        function Promise(excutor) { 
            this._state = PENDING
            this._value = undefined
            this._callbacks = [];
    
            let _this = this;
            function resolve(value) { 
                //这里面不能直接使用用this,因为不是在内部调用的，会改变this的指向
                if (_this.state !== PENDING) return ///多个resolved调用，保持仅有一个resolved函数有效
                _this._state = RESOLVED
                _this._value = value
                if (_this._callbacks.length) { 
                    setTimeout(_ => { 
                        _this._callbacks.forEach(callback => { 
                            callback.onResolved(value)
                        })
                    }, 0)
                }
            }
    
            function reject(reason) { 
                if (_this.state !== PENDING) return //多个reject调用，保持仅有一个reject函数有效
                _this._state = REJECTED
                if (_this._callbacks.length) { 
                    setTimeout(_ => { 
                        _this._callbacks.forEach(callback => { 
                            callback.onRejected(value)
                        })
                    }, 0)
                }
            }
            try { 
                excutor(resolve, reject)
            } catch (err) { 
                reject(err);
            }
        }
    
        /** * * @param {*} onResolved * @param {*} onRejected * 返回的promise的结果由 onResolved/onRejected 的执行结果决定 */
        Promise.prototype.then = function (onResolved, onRejected) { 
            //透传处理
            onResolved = typeof onResolved === 'function' ? onResolved : value => value
            onRejected = typeof onRejected === 'function' ? onRejected : reason => {  throw reason }
    
            let _this = this;
    
            return new Promise((resolve, reject) => { 
                function handle(callback) { 
                    try { 
                        let result = callback(_this.value)
                        if (result instanceof Promise) { 
                            result.then(resolve, reject)
                        } else { 
                            resolve(result)
                        }
                    } catch (err) { 
                        reject(err)
                    }
                }
                //处理三种状态PENDING/RESOLVED/REJECTED
                if (_this._state === PENDING) { 
                    _this._callbacks.push({ 
                        onResolved() { 
                            handle(onResolved)
                        },
                        onRejected() { 
                            handle(onRejected)
                        }
                    })
                } else if (_this._state === RESOLVED) { 
                    //1.返回的是promise, resolve,reject
                    //2.返回的是非promise
                    //3.处理异常
    
                    //立即异步执行
                    setTimeout(_ => { 
                        handle(onResolved)
                    })
                } else { 
                    handle(onRejected)
                }
            })
        }
        Promise.prototype.catch = function (onRejected) { 
            return this.then(undefined, onRejected)
        }
      
    })(window)

## 静态方法 ##

### Promise.resolve/Promiss.reject ###

//返回一个失败状态的promise
    Promise.reject = function (reason) { 
        return new Promise((resolve, reject) => { 
            reject(reason)
        })
    }
    
    Promise.resolve = function (value) { 
        return new Promise((resolve, reject) => { 
            if (value instanceof Promise) { 
                value.then(resolve, reject)
            } else { 
                resolve(value)
            }
        })
    }

### Promise.all的逻辑实现 ###

/** * * @param {*} promises promise的数组 */
    Promise.all = function (promises) { 
        let values = new Array(promises.length);
        let resolveCount = 0;
        return new Promise((resolve, reject) => { 
            promises.forEach((p, index) => { 
                //Promise.resolve(p):把p统一处理成promise
                Promise.resolve(p).then(value => { 
                    resolveCount++;//成功的计数
                    values[index] = value
                    if (resolveCount === promises.length) { 
                        resolve(values)
                    }
                }, reason => { //有一个失败就整体失败
                    reject(reason)
                })
            })
        })
    }

### Promise.race 的整体实现 ###

Promise.race = function (promises) { 
            return new Promise((resolve, reject) => { 
                promises.forEach(p => { 
                    //Promise.resolve(p):把p统一处理成promise
                    Promise.resolve(p).then(value => { 
                        resolve(value)//有一个成功就整体失败
                    }, reason => { //有一个失败就整体失败
                        reject(reason)
                    })
                })
            })
        }

### Promise.resolveDelay/Promoise.rejectDelay ###

Promise.resolveDelay = function (value, timeout) { 
            return new Promise((resolve, reject) => { 
                setTimeout(_ => { 
                    if (value instanceof Promise) { 
                        value.then(resolve, reject)
                    } else { 
                        resolve(value)
                    }
                }, timeout)
            })
        }
    
    Promise.rejectDelay = function (reason, timeout) { 
        return new Promise((resolve, reject) => { 
            setTimeout(_ => { 
                reject(reason)ð
            }, timeout)
        })
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 Promise原理

JS引擎是单线程的，直白来说就是一个时间点下JS引擎只能去做一件事情，而java这种多线程语言可以同时做几件事情。JS做的任务分为同步和异步两种，所谓异步简单说就是一个任务不是

喜欢ヅ旅行/ 2024年03月31日 15:25/ 0 赞/ 43 阅读

相关 Promise - （二）Promise核心实现

目录回调地狱问题及其产生根因解决回调地狱问题：Promise的设计思路 Promise构造函数的内部细节 Promise构造函数和excutor执行器函数的关系

阳光穿透心脏的1/2处/ 2023年10月01日 08:09/ 0 赞/ 37 阅读

相关图解JavaScript——代码实现【2】（重点是Promise、Async、发布/订阅原理实现）

> 本节主要阐述六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async的原理实现，通过对

蔚落/ 2022年12月13日 12:59/ 0 赞/ 140 阅读

相关 promise原理:代码实现

基础代码 (function (window) { const PENDING = 'pending' const RESOLVED

痛定思痛。/ 2022年12月06日 15:39/ 0 赞/ 133 阅读

相关 Promise的实现

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

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

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

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

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

相关 Promise介绍--异步原理

这部分内容源于知乎上的一个[提问][Link 1]。 setTimeout(function(){ console.log(4)},0); new Promise(f

悠悠/ 2022年06月05日 07:05/ 0 赞/ 213 阅读

相关 Promise原理及手写Promise

原理： > Promise 原理围绕以下三个问题进行解决： > > （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！） >

浅浅的花香味﹌/ 2022年05月28日 01:55/ 0 赞/ 257 阅读

相关 Promise的实现原理

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

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

相关 Promise原理与实现

`Promise`标准 1. `Promise` 规范有很多，如`Promise/A`，`Promise/B`，`Promise/D` 以及 `Promise/A`

末蓝、/ 2021年06月26日 16:06/ 0 赞/ 391 阅读