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

or0fun 发布于2019-08-21 17:49 / 2522人阅读

摘要：循环执行，每一次循环都是异步且等上一循环结束后再执行下一次循环。异步执行数组中的每一项，并在每一项执行完后才继续执行后面的代码。并不是循环体内的内容异步执行了，而是用循环的形式，把多个用方法连接起来。

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

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

后来我想，这可以用来实现类似Rx的流的概念。我一系列操作步骤，无论同步异步，全放在循环里，可以大大优化代码

/**异步循环 */
    function doLoop()
    {
        try
        {
            var result:Promise = 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方法连接起来。

GPU云服务器云服务器 foreach循环 jquery_promise异步 php返回继续执行 java继续当前循环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90057.html

《Node.js设计模式》基于ES2015+的回调控制流

摘要：以下展示它是如何工作的函数使用构造函数创建一个新的对象，并立即将其返回给调用者。在传递给构造函数的函数中，我们确保传递给，这是一个特殊的回调函数。本系列文章为《Node.js Design Patterns Second Edition》的原文翻译和读书笔记，在GitHub连载更新，同步翻译版链接。欢迎关注我的专栏，之后的博文将在专栏同步： Encounter的掘金专栏知乎专栏...

LiuRhoRamen 2019-08-21 17:46 评论0 收藏0
你不知道的Virtual DOM（六）：事件处理&异步更新

摘要：如果列表是空的，则存入组件后将异步刷新任务加入到事件循环当中。四总结本文基于上一个版本的代码，加入了事件处理功能，同时通过异步刷新的方法提高了渲染效率。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的两大前端框架，React和Vue，都不约而同的借助Virtual DO...

caozhijian 2019-08-23 11:51 评论0 收藏0
我了解到的JavaScript异步编程

摘要：接下来我们看下三类异步编程的实现。事件监听事件发布订阅事件监听是一种非常常见的异步编程模式，它是一种典型的逻辑分离方式，对代码解耦很有用处。一、一道面试题前段时间面试，考察比较多的是js异步编程方面的相关知识点，如今，正好轮到自己分享技术，所以想把js异步编程学习下，做个总结。下面这个demo 概括了大多数面试过程中遇到的问题： for(var i = 0; i < 3; i++...

RichardXG 2019-08-20 18:56 评论0 收藏0
[译]async-await 数组循环的几个坑

摘要：译数组循环的几个坑原文地址原文作者在循环中使用循环遍历数组似乎很简单，但是在将两者结合使用时需要注意一些非直观的行为。循环的情况问题如上述代码能够正常执行。但我还是喜欢循环带来的简洁和高可读性。 [译]async-await 数组循环的几个坑原文地址：https://medium.com/dailyjs/th... 原文作者：Tory Walker 在 Javascript 循...

warkiz 2019-08-26 13:33 评论0 收藏0
JavaScript的异步解决方案

摘要：也就是说，你调用生成器函数，它会返回给你一个迭代器。迭代器会遍历每个中断点。等同于总结异步解决方案还有其他的一些方法不过都不重要我们只要掌握了用写异步代码更方便维护第一次写文章写的不好多多包涵毕竟很多东西都是站在前任人的肩膀上直接拿过来的由于JavaScript是单线程的一门脚本语言（主线程是单线程）所以异步问题是个让人常头疼的问题我们来看一下常见的传统解决方案 1.回调函数回...

luckyyulin 2019-08-23 13:47 评论0 收藏0