【前端基础】基本款之Promise手动实现

前端基础入门,手动实现一个Promise的polyfill。

好久没写blog,最近组里及其缺人,每天都不少来面试的,但大部分就是来走个过场。我深深感觉到前端开发人员的市场现状就是这样:从业人员数量庞大,但真正能做到基础入门的却并不多。所以,公司招不到人,前端开发找不到工作。

像Promise的原理就是前端入门的基本款知识点,基础中的基础了,如果这都不理解,说什么三年工作经验,五年工作经验的,扯淡,你那是一年工作经验用了五年。

遗憾的是,这知识点大多数面试者完成度并不高,实际现场实现的过程中,面试官并不是让你实现完整的Promise规范,也不可能,只需要完成基本的链式调用,然后思路能讲清楚就足够了。

先开个帖子立个flag,有空的时候补充一些稍微详细点的知识点和注意事项。

    
        // 调用方式
        const promise = new Promise(function(resolve, reject) {
            // ... some code
            if (/* 异步操作成功 */){
                resolve(value);
            } else {
                reject(error);
            }
        });
        promise.then(function(value) {
            // success
        }, function(error) {
            // failure
        });
    

先简单写一个初步的实现方式

    
        class NeatPromise {
            constructor(logics) {
                if (typeof logics !== 'function') {
                    throw new Error('Callback must be a function')
                }
                this.status = "PENDING"
                this.chainCBs = []
                const resolve = (res) => {
                    if (this.status === 'PENDING') {
                        this.status = 'FULFILLED'
                        this.value = res
                        this.chainCBs.reduce((legacy, { onFulfilled }) => onFulfilled(legacy), this.value)
                    }
                }
                const reject = (err) => {
                    if (this.status === 'PENDING') {
                        this.status = 'REJECTED'
                        this.value = err
                        this.chainCBs.reduce((legacy, { onRejected }) => onRejected(legacy), this.value)
                    }
                }
                try {
                    logics(resolve, reject)
                } catch (err) {
                    reject(err)
                }
            }
            
            then(onFulfilled, onRejected) {
                if (this.status === 'FULFILLED') {
                    onFulfilled(this.value)
                } else if (this.status === 'REJECTED') {
                    onRejected(this.value)
                } else {
                    this.chainCBs.push({ onFulfilled, onRejected })
                }
                return this;
            }
        }
    

测试代码

    
        let p = new NeatPromise(resolve => {
             setTimeout(() => resolve('Halo Promise'), 2000);
        });
        p
            .then(res1 => {
                console.log(res1)
                return 'Halo Then1'
            })
            .then(res2 => {
                console.log(res2)
                return new NeatPromise(resolve => {
                    setTimeout(() => resolve('Halo Then2 again'), 2000);
                })
            })
            .then(res3 => console.log(res3))
        
        p = new NeatPromise((resolve, reject) => {
             setTimeout(() => reject(new Error('Error msg body')), 2000);
        });
        p.then(() => {}, err => console.log('Async:', err.stack));
        
        p = new NeatPromise(() => { throw new Error('Error msg body'); });
        p.then(() => {}, err => console.log('Sync:', err.stack));
    

未完待续。。。

【前端基础】基本款之Promise手动实现
Share this