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

or0fun 發布于2019-08-21 17:49 / 2499人閱讀

摘要：循環執行，每一次循環都是異步且等上一循環結束后再執行下一次循環。異步執行數組中的每一項，并在每一項執行完后才繼續執行后面的代碼。并不是循環體內的內容異步執行了，而是用循環的形式，把多個用方法連接起來。

網上有很多類似的實現方式，但我也不太懂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繼續當前循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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