手写Promise代码逻辑注释

系统管理员 2022-12-25 06:58 114阅读 0赞

# Promise代码 #

const PENDING = 'pending'
    const FULFILLED = 'fulfilled'
    const REJECTED = 'rejected'
        // 因为状态经常使用所以设置为常量
    
    function resolvePromise(Promise2, x, resolve, reject) {
        if (Promise2 === x) { //防止Promise重复调用
            reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
        }
        if (x instanceof MyPromise) {
            x.then(resolve, reject)
        } else {
            resolve(x)
        }
    }
    class MyPromise {
    
        //传进执行器，执行器立即执行
        constructor(executor) {
                executor(this.resolve, this.reject)
            }
            //Promise的状态
        status = PENDING
            //成功的值
        value = undefined
            //失败的值
        reason = undefined
    
        scb = []
    
        fcb = []
            //箭头函数使this指向指向当前Mypromise
        resolve = value => {
    
            if (this.status != PENDING) return
            this.status = FULFILLED
                //保存成功之后的值
            this.value = value
            while (this.scb.length) this.scb.shift()()
        }
        reject = reason => {
            if (this.status != PENDING) return
            this.status = REJECTED
                //保存失败之后的值
            this.reason = reason
                // this.fcb && this.fcb(reason)
            while (this.fcb.length) this.fcb.shift()()
        }
        then(scb, fcb) {
            scb = scb ? scb : value => value; //使then方法的参数变为可选参数
            fcb = fcb ? fcb : reason => { throw reason };
            let Promise2 = new MyPromise((resolve, reject) => {
                if (this.status === FULFILLED) {
                    setTimeout(() => { //使用setTimeOut来拿到Promise的值
                        try { //用来捕获错误
                            let x = scb(this.value)
                                // 判断x值是普通值还是myPromise对象，分别做处理。
                                // 因为三个判断都需要可以抽取为一个函数
                            resolvePromise(Promise2, x, resolve, reject)
                        } catch (error) {
                            reject(error)
                        }
                    }, 0)
                } else if (this.status === REJECTED) {
                    setTimeout(() => { //使用setTimeOut来拿到Promise的值
                            try { //用来捕获错误
                                let x = fcb(this.reason)
                                    // 判断x值是普通值还是myPromise对象，分别做处理。
                                    // 因为三个判断都需要可以抽取为一个函数
                                resolvePromise(Promise2, x, resolve, reject)
                            } catch (error) {
                                reject(error)
                            }
                        }, 0)
                        // let x = fcb(this.reason)
                        // reject(x)
                } else {
                    //等待 存储回调
                    // this.fcb = fcb;
                    // this.scb = scb;
                    this.scb.push(() => {
                        setTimeout(() => { //使用setTimeOut来拿到Promise的值
                            try { //用来捕获错误
                                let x = scb(this.value)
                                    // 判断x值是普通值还是myPromise对象，分别做处理。
                                    // 因为三个判断都需要可以抽取为一个函数
                                resolvePromise(Promise2, x, resolve, reject)
                            } catch (error) {
                                reject(error)
                            }
                        }, 0)
                    });
                    this.fcb.push(() => {
                        setTimeout(() => { //使用setTimeOut来拿到Promise的值
                            try { //用来捕获错误
                                let x = fcb(this.reason)
                                    // 判断x值是普通值还是myPromise对象，分别做处理。
                                    // 因为三个判断都需要可以抽取为一个函数
                                resolvePromise(Promise2, x, resolve, reject)
                            } catch (error) {
                                reject(error)
                            }
                        }, 0)
                    });
                }
            })
            return Promise2
        }
        static all(array) {
            let result = [];
            let index = 0; //解决空值，因为要等待异步操作的结果
            return new MyPromise((resolve, reject) => {
                function addData(key, value) {
                    result[key] = value
                    index++
                    if (index === array.length) {
                        resolve(result)
                    }
                }
                for (let i = 0; i < array.length; i++) {
                    let current = array[i]
                    if (current instanceof MyPromise) {
                        //是Promise对象
                        // addData(i, current.then())
                        current.then(value => addData(i, value), reason => reject(reason))
                    } else {
                        //是普通值
                    }
                }
            })
        }
        static resolve(value) {
            if (value instanceof MyPromise) return value
            return new MyPromise(resolve => resolve(value))
        }
        catch (fcb) {
            return this.then(undefined, fcb)
        } finally(callback) {
            return this.then(value => {
                //调用Mypromise.resolve是等待上一个执行完成
                return MyPromise.resolve(callback()).then(() => value)
            }, reason => {
                return MyPromise.resolve(callback()).then(reason => { throw reason })
            })
        }
    }
    module.exports = MyPromise;
    // module.exprots = MyPromise;

# 逻辑与步骤 #

/**
     * ——————————核心逻辑——————————
     * 1.Promise是一个类 在执行这个类的时候，需要传递一个执行器，执行器会立即执行
     * 2.Promise三种状态 pending fulfilled rejected pending
     * pending->fulfilled
     * pending->rejected
     * 3.Promise 中resolve和reject来更改状态
     * 4.then 方法内部判断，then方法应该是被定义原型对象上
     * 5.需要存储成功或者失败的原因
     * ————————————异步逻辑————————————————
     * -then方法存储值，resolve和reject来判断是否有值
     * 存储失败回调和成功回调存储起来
     * ————————————多次调用then————————————
     * 将存储的属性变为一个数组
     * ————————————链式调用——————————————
     * then方法返回的是一个myPromise对象,并需要判段传进的是Mypromise对象或者普通值
     *  then方法链式调用并识别Promise对象自返回(防止Promise的循环调用)
     * ————————————捕获错误——————————————
     * 1，try catch
     * 2.setTimeout  来拿到当前实例返回结果
     * 
     * ————————————then可选参数——————————
     * then方法中判断
     * ————————————myPromise.all方法的实现————————
     * 1.传入一个数组。元素有Promise 和普通值
     * 2.有一个失败最终都失败
     * 3.all方法是静态方法
     * 4.等待异步操作结果，防止空值现象
     * ————————————myPromise.resolve()——————
     * 将一个值转换为Promise 对象 如果是Promise对象直接返回该对象
     * ————————————Promise。fianlly方法——————
     * 无论成功失败，finally方法都会调用
     * 处理下一个等待上一个执行完成
     */

发表评论取消回复

表情：

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

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

相关阅读

相关【JavaScript】手写一个promise

const PENDING = 'PENDING'; const RESOLVE = 'RESOLVE'; const REJECTED = 'REJE

曾经终败给现在/ 2023年01月03日 01:59/ 0 赞/ 138 阅读

相关手写Promise代码逻辑注释

Promise代码 const PENDING = 'pending' const FULFILLED = 'fulfilled' const R

系统管理员/ 2022年12月25日 06:58/ 0 赞/ 115 阅读

相关手写Promise源码

一、编写一个基础版本的promise class Promises { constructor(fn) { fn(this.resol

怼烎@/ 2022年11月18日 04:54/ 0 赞/ 215 阅读

相关 Promise原理及手写Promise

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

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

相关 js手写Promise

先写一个简单的Promise： function Promise(executor) { var self = this; this

迷南。/ 2022年05月09日 14:52/ 0 赞/ 294 阅读

相关手写实现一个Promise

function NewPromise (fn) { this.state = 'pending' this.fulfillL

骑猪看日落/ 2022年02月22日 16:46/ 0 赞/ 366 阅读

相关手写简单版 Promise

Promise 是异步编程的的最终结果，Promise 有三种状态： pending、fulfilled、rejected。只有异步操作的结果可以决定当前是哪一种状态，其它任何

曾经终败给现在/ 2021年12月21日 09:31/ 0 赞/ 516 阅读

相关手写Promise

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

港控/mmm°/ 2021年11月26日 10:04/ 0 赞/ 351 阅读

相关珠峰架构 - 手写promise

核心思想核心思想是状态的改变，会引起值的改变，且状态不可逆。主要是为了解决异步回调地狱问题 1. 三个状态 pending,fulfilled,reje

た入场券/ 2021年09月09日 05:32/ 0 赞/ 474 阅读

相关手写JS实现Promise

Promise是一个管理异步编程的方案，它是一个构造函数，每次使用可用new创建实例；它有三种状态：pending、fulfilled和rejected，这三种状态不会受...

朱雀/ 2020年05月07日 09:18/ 0 赞/ 886 阅读