promise顺序执行的多种方案（此类问题的母题）

异步管理一直是前端开发的一个重点。

就多个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。

而我把传统的和最后一种作为母题。

标签：f2,resolve,const,log,runing,顺序,promise,Promise,母题
来源： https://www.cnblogs.com/zhensg123/p/14725672.html