Promise配合forEach的使用,异步循环后再继续执行

网上有很多类似的实现方式,但我也不太懂js啊,所以我专门用TS写了一遍。
循环执行Promise,每一次循环都是异步且等上一循环结束后再执行下一次循环。
TypeScript异步执行数组中的每一项,并在每一项执行完后才继续执行后面的代码。
用的ES2015。

这个写法有什么用处呢?如果是加载资源,一般都是同时加载,最后统计加载完成的个数,都是能并发就并发的。
想来想去,不知道这种依次异步的实现方式,用在哪里。

后来我想,这可以用来实现类似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方法连接起来。

    原文作者:zengjoeng
    原文地址: https://segmentfault.com/a/1190000012188886
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞