javascript|挑战大厂第2篇-手动实现promise.all segmentfault|前端

挑战大厂系列文章，转载请注明来源

“多个异步函数调用怎么实现返回值是按顺序的？”
“promise.all”
“请说下 promise.all 的实现原理？”
不废话，直接上代码
原始版回调函数，利用闭包贮存返回顺序

function all(fns) { let result = [] fns.forEach((fn, index) => { fn(res => { result[index] = res if (result.length === fns.length) { console.log(result); // [ 'fn1', 'fn2' ] 保持返回数据的顺序和函数调用的顺序一致 } }) }) } // 先执行但是后返回 let fn1 = function(fn) { setTimeout(() => { fn('fn1') }, 400) } let fn2 = function(fn) { setTimeout(() => { fn('fn2') }, 200) }all([fn1, fn2])

Promise.all 版
resolve 返回结果，利用闭包贮存返回顺序

function all(fns) { return new Promise((resolve, reject) => { let result = [] fns.forEach((fn, index) => { fn().then(res => { result[index] = res if (result.length === fns.length) { resolve(result) } }) }) }) } // 函数返回的是一个 promise let fn1 = function() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('fn1') }, 400) }) } let fn2 = function(fn) { return new Promise((resolve, reject) => { setTimeout(() => { resolve('fn2') }, 200) }) }all([fn1, fn2]).then(res => { console.log(res); // [ 'fn1', 'fn2' ] })

【javascript|挑战大厂第2篇-手动实现promise.all】一时没想到的话可能真搞不出来，想到了这个点就简单了~