异步管理一直是前端开发的一个重点。
就多个promise的顺序执行,总结了下面几种方案。
使用回调的方案,也是最传统的方案
const f1 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p1 runing') resolve(1) }, 1000) }) const f2 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p2 runing') resolve(2) }, 1000) }) // 使用回调形式 f1().then(()=>{ f2() })
使用async、await的方案。
const f1 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p1 runing') resolve(1) }, 1000) }) const f2 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p2 runing') resolve(2) }, 1000) }) // 使用async await async function asyncPromise(){ await f1() f2() }
使用reduce的方案,认为是最为优雅,但是最为难懂的。
const f1 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p1 runing') resolve(1) }, 1000) }) const f2 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p2 runing') resolve(2) }, 1000) }) const arr = [f1, f2] const runPromiseInsequence = (array, value)=>array.reduce( (promiseChain, currentFunction)=>promiseChain.then(currentFunction), Promise.resolve(value) ) runPromiseInsequence(arr, 'init')
使用递归的方案
const f1 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p1 runing') resolve(1) }, 1000) }) const f2 = ()=>new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('p2 runing') resolve(2) }, 1000) }) // 使用递归 const arr = [f1, f2] function sequencePromise(arr){ const pro = arr.shift() if(pro) { pro().then(()=>{ sequencePromise(arr) }) } } sequencePromise(arr)
以上四种,后两种可以不增加代码的情况就可以直接顺序执行多个promise。
而我把传统的和最后一种作为母题。