前端开发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 函数等。