美文网首页
手写promise

手写promise

作者: Chris__Liu | 来源:发表于2019-11-21 15:24 被阅读0次
    class MyPromise {
            constructor(fn) {
                const PENDING = 'pending'
                const FULFILLED = 'fulfilled'
                const REJECTER = 'rejected'
                this.stutus = PENDING
                // then中返回的resolve值
                this.value = null
                // then中返回的reject值
                this.reason = null
                // resolve函数回调队列,在宏任务中settimeout中触发
                this.fulfilledQueue = []
                // reject函数回调函数队列,在宏任务中settimeout中触发
                this.rejectQueue = []

                // reslove函数,异步操作
                const resolve = value => {
                    // 放在事件循环最后获取值
                    setTimeout(() => {
                        this.status = FULFILLED
                        // promise状态下,没调用then时的value
                        this.value = value
                        // cb就是then传入的函数,例如:(res) => {console.log(res)}
                        this.fulfilledQueue.map(cb => {
                            this.value = cb(value)
                        })
                    });
                }
                const reject = reason => {
                    setTimeout(() => {
                        this.status = REJECTER
                        this.reason = reason
                        this.rejectQueue.map(cb => {
                            this.reason = cb(reason)
                        })
                    });
                }
                try {
                    fn(resolve, reject)
                } catch (e) {
                    reject(e)
                }
            }
            then(resolveFn, rejectFn) {
                typeof resolveFn === 'function' && this.fulfilledQueue.push(resolveFn)
                typeof rejectFn === ' function' && this.rejectQueue.push(rejectFn)
                return this
            }
            all(promises) {
                return new MyPromise((resolve, reject) => {
                    // 需要记录一下promise的个数
                    let length = promises.length
                    let count = 0
                    let arr = []

                    promises.forEach((promise, index) => {
                        promise.then((value) => {
                            // 没便利一个promise都要+1
                            count++
                            arr.push(value)
                        }).then(res => {
                            // 相等的时候才resolve
                            if (count === length) {
                                resolve(arr)
                            }
                        })
                    })
                })
            }
            race(promises) {
                return new Promise((resolve, reject) => {
                    promises.forEach((promise) => {
                        // 谁快谁先出
                        promise.then(resolve, reject);
                    });
                });
            }
            // 用于promise方法链时 捕获前面onRejected抛出的异常
            catch(rejectFn) {
                return this.then(null, rejectFn);
            }
        }

        let promise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                resolve('1')
            }, 8000);
        })
        let promise1 = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                resolve('2')
            }, 2000);
        })
        let promise2 = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                resolve('3')
            }, 5000);
        })
        let promise3 = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                resolve('4')
            }, 7000);
        })
        promise.all([promise1, promise2, promise3]).then(res => {
            console.log(res)
        })
        promise.race([promise1, promise2, promise3]).then(res => {
            console.log(res)
        }).catch(e => {
            console.log(e)
        })

相关文章

  • 手写Promise

    手写 Promise 我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它,并且手写...

  • 手写 Promise 系列 --- 3

    在前两篇(手写 Promise 系列 --- 1)和(手写 Promise 系列 ---2) 中,达成了3个目标 ...

  • 手写Promise

    $ 正常的promise用法   $ 手写的Promise   # 测试可行性

  • 手写promise

    手写promise 带大家手写一个 promis。在手写之前我会先简单介绍一下为什么要使用promise、prom...

  • 纯手写实现自己的nodejs promise 库

    纯手写实现自己的nodejs promise 库什么是Promise?promise 链Async/Await后续...

  • 手写基础 promise

    1. 前言 玩下吧 手写 promise,看看能写成啥样 2. promise 基础结构 3. 手写`promi...

  • 手写 Promise

    一、Promise 是一个异步操作返回的对象,用来传递异步操作的消息。 Promise 介绍和使用详见: 认识并使...

  • 手写Promise

  • 手写Promise

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。 这篇博客有关于P...

  • 手写promise

    本章节纯粹是对promise手写实现。如果不了解promise自行了解再来学习本章知识。promise初体验首先,...

网友评论

      本文标题:手写promise

      本文链接:https://www.haomeiwen.com/subject/fmdtwctx.html