美文网首页
如何手写一个Promise

如何手写一个Promise

作者: 小豆soybean | 来源:发表于2021-09-28 01:02 被阅读0次

参考文章:https://www.jianshu.com/p/23f34c35da0c

const { resolve } = require("path/posix");

class Promise {//Promise里面参数传一个匿名函数,函数的参数是resolve和reject
    // 初始属性设置
    constructor(executor){
        this.promiseState = 'pending';
        this.promiseResult = null;
         // 保存回调函数
        this.callbacks = [];
        
        // resolve都写在constructor里面
        const resolve = (value) => {
            // 判断状态 让Promise只执行一次。
            if (this.promiseState !== 'pending') return;
            this.promiseState = 'fulfilled';
            this.promiseResult = value;
            // 要包到setTimeout里面
            setTimeout(()=> {
                this.callbacks.forEach(cb => cb.onResolved(value));
            })
        }

        const reject = (err) => {
            if (this.callbacks !== 'pending') return;
            this.promiseState = 'rejected';
            this.promiseResult = err;
            setTimeout(()=>{
                this.callbacks.forEach(cb => cb.onRejected(err));
            })
        }
        try {
            executor(resolve, reject);//这里resolve是传递给儿子了, 儿子完成了直接调用就行了。
        } catch (error) {
            reject(error);     
        }
    }
    // then方法
    then(onResolved, onRejected) {
        // 这里处理异常穿透。假如这个then里面啥都没写,下一个then里面写了一个promise还要可以继续执行下去。
        
        if (typeof onResolved != 'function') {
            onResolved = val => val;
        }
        if (typeof onRejected !== 'function') {
            onRejected = error => {throw error;} //随便原样返回就行
        }
        
        // then里面是返回了一个Promise this想要一直穿透就要用箭头函数
        const handleCallback = (callback) => {
            try {
                let res = callback(this.promiseResult);
                if (res instanceof Promise) {
                    // 因为这里是一个promise,处理一下值搞进resolve里面,这样下一个then就能拿到了。
                    res.then(val => resolve(val), error => reject(error));
                } else {
                    resolve(res);
                }
            } catch (error) {
                reject(error);
            }
        }

        //写一个handleCallback函数。
        if (this.promiseState === 'fulfilled') {
            // !!!这里要包一层setTimeout
            setTimeout(()=> {
                handleCallback(onResolved)
            });
        }
        if (this.promiseState === 'rejected') {
            setTimeout(()=> {
                handleCallback(onRejected)
            })
        }
        if (this.promiseState === 'pending') {
            this.callbacks.push({
                onResolved: () => {
                    handleCallback(onResolved)
                },
                onRejected: () => {
                    handleCallback(onRejected)
                }
            })
        }
    }

    catch(onRejected) {
        return this.then(undefined, onRejected);
    }

    // static 方法
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then( val =>resolve(val), error => reject(error))
            } else {
                resolve(value);
            }
        })
    }

    static rejected(error) {
        // 这里只有reject
        return new Promise((resolve, reject) => {
             reject(error)
        });
    }

    // all方法
    static all(promiseArrays) {
        return new Promise((resolve, reject) => {
            let result = [];
            let length = promiseArrays.length;
            promiseArrays.forEach(promiseObj => {
                promiseObj.then(val => {
                    result.push(val);
                    // 由于是多个异步的关系,所以需要判断是否都执行完毕。
                    if (result.length === length) {
                        resolve(result);
                    }
                }, error => {
                    reject(error)
                })

            })
        })
    }

    // race方法
    static race(promiseArrays) {
        return new Promise((resolve, reject) => {
            promiseArrays.forEach(promiseObj => {
                promiseObj.then((value)=>{
                    resolve(value)
                }, error => {
                    reject(error)
                })
            })

        })
    }

}

相关文章

  • 手写Promise

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

  • 手写promise

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

  • 如何手写一个Promise

    参考文章:《Promise,从入门到放弃》[https://juejin.cn/post/693968889252...

  • 如何手写一个Promise

    参考文章:https://www.jianshu.com/p/23f34c35da0c[https://www.j...

  • es5 手写promise

    参考自 前端精髓--手写一个Promise

  • 手写 Promise 系列 --- 3

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

  • 手写Promise

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

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

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

  • 手写基础 promise

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

  • 手写promise

    promise 手写 代码来源:darrell-wheels promise 30分钟,带你实现一个符合规范的 P...

网友评论

      本文标题:如何手写一个Promise

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