Promise配合forEach的使用,異步循環後再繼續執行

網上有不少相似的實現方式,但我也不太懂js啊,因此我專門用TS寫了一遍。
循環執行Promise,每一次循環都是異步且等上一循環結束後再執行下一次循環。
TypeScript異步執行數組中的每一項,並在每一項執行完後才繼續執行後面的代碼。
用的ES2015。數組

這個寫法有什麼用處呢?若是是加載資源,通常都是同時加載,最後統計加載完成的個數,都是能併發就併發的。
想來想去,不知道這種依次異步的實現方式,用在哪裏。promise

後來我想,這能夠用來實現相似Rx的流的概念。我一系列操做步驟,不管同步異步,全放在循環裏,能夠大大優化代碼併發

/**異步循環 */
    function doLoop()
    {
        try
        {
            var result:Promise<any> = Promise.resolve();

            //forEach寫法
            loopArr.forEach(
                function (factory)
                {
                    result = result.then(factory);
                }
            );

            // Promise.all寫法
            //Promise.all(loopArr.map(
            //    function(factory)
            //    {
            //        result = result.then(factory);
            //    }
            //));

            result.then(logLoopResult);
        }
        catch(err)
        {
            console.log("loop failed");
        }
    }

    /**循環結束後纔會執行此方法 */
    function logLoopResult()
    {
        console.log("do Loop end");
    }
    
    var loopCount:number = 0;
    var maxCount:number = 3;
    var loopArr = [promiseFactry1, promiseFactry2, promiseFactry3];
    function calllLoopPromise(reslove)
    {
        setTimeout(
            function ()
            {
                //此處loopCount++只是爲了看下效果,實際不須要計數
                loopCount++;
                console.log(loopCount, maxCount);
                return reslove("loopCount");
            } 
            , 1000
        );
    }

    function promiseFactry1()
    {
        return new Promise(calllLoopPromise);
    }

    function promiseFactry2()
    {
        return new Promise(calllLoopPromise);
    }

    function promiseFactry3()
    {
        return new Promise(calllLoopPromise);
    }

歸根結底,這種寫法,適合須要處理批量promise的狀況。
並非循環體內的內容異步執行了,而是用循環的形式,把多個promise用then方法鏈接起來。異步

相關文章
相關標籤/搜索