实现一个自定义Promise

前端开发Kingcean 2020-05-12

Promise 作为一种异步解决方案,一开始在社区流行,后面加入到 ES6 标准,成了“真香库”中不可或缺的成员。

这里实现一个自定义的Promise,通过一个异步回调和测试函数来测试最终的效果,暂未实现错误捕获:

const inform = (res) => setTimeout(res, 1000, "test");
const testPromise = pro => pro.then((val) => console.log(val) || val).then(console.log);

实现的原理是通过将参数和将执行的函数存入数组,仅当异步函数执行时触发整个执行队列,将整个队列的执行权交给第一个触发的回调函数,就像多米诺骨牌一样:

class Prom {
    static of(f) {
        return new Prom(f).push(f);
    }
    argArr = [];
    fArr = [];
    push(f) {
        f(this.monitor.bind(this)(this.run.bind(this)));
        return this;
    }
    monitor(f) {
        return (...args) => {
            this.argArr.push(args);
            f();
        };
    }

    then(f) {
        !this.over ? this.fArr.push(f) : this.nextPro.then(f);
        return this;
    }
    run() {
        while (this.fArr.length) {
            this.argArr.push([this.fArr.shift()(...this.argArr.shift())]);
        }
    }
}

可通过执行下面的代码看到执行的效果和 Promise 是一样的:

testPromise(new Promise(inform));
testPromise(Prom.of(inform));

Promise 解决了回调函数嵌套的问题,使代码的可读性变得更高。它的局限性在于,链式调用无法解决多个异步函数按顺序执行的问题,而需要借助迭代器或 Thunk 函数等。

相关推荐