zoukankan      html  css  js  c++  java
  • 如何用 async 控制流程

    来自: http://larry850806.github.io/2016/05/31/async/

    [Javascript] 如何用 async 控制流程 (一)

    async

    async 是一個 Node.js module
    也可以在前端的 javascript 中直接使用
    讓 code 更好看也更好 debug

    在 Node.js 中

    npm install async
    
    var async = require('async');
    

    在前端 javascript 中

    <script type="text/javascript" src="https://rawgit.com/caolan/async/master/dist/async.min.js"></script>
    

    callback

    因為 javascript 特有的 callback
    callback 用多了你的 code 就會長這樣
    Google Callback 地獄

    缺點:

    • code 有好幾層很醜
    • 很難 debug
    • 要看很久才能看懂

    所以就有了 async
    專門在處理這些 asynchronous 的 callback


    async.waterfall

    使用時機 :
    fun2 需要 fun1 callback 的資料
    fun3 又需要 fun2 callback 的資料
    最後的結果又需要 fun3 callback 的資料
    如果 function 更多的話會再疊上去

    func1(function(err1, result1){
        if(err1) throw err1;
    
        func2(result1, function(err2, result2, result3){
            if(err2) throw err2;
    
            func3(result2, result3, function(err3, result4){
                if(err3) throw err3;
    
                console.log(result4);
            });
        });
    });
    

    如果用 async

    // waterfall 會按照順序執行 function
    // 而且可以傳參數
    async.waterfall([
        function(next){
            func1(function(err1, result1){
                next(err1, result1);
                // 用 next 把參數傳到下一個 function
                // 把 result1 放到下面的 rst1
            });
        },
        function(rst1, next){
            func2(rst1, function(err2, result2){
                next(err2, result2, result3);
                // 把 result2 放到下面的 rst2
                // 把 result3 放到下面的 rst3
            });
        },
        function(rst2, rst3, next){
            func3(rst2, rst3, function(err3, result4){
                next(err3, result4);
                // 把 result4 放到下面的 rst (因為 fun3 是最後一個了)
            });
        }
    ], function(err, rst){
        if(err) throw err;  // 匯集 err1 err2 err3
        console.log(rst);   // 收到的 rst = 上面的 result4
    });
    

    用 waterfall 不會讓你的 callback 越疊越高
    而且可以匯集 error 一併處理
    不用在每個 callback 內確認 error


    async.series

    使用時機 :
    fun2 不需要 fun1 callback 的資料
    fun3 也不需要 fun2 callback 的資料
    但最後的結果要把 fun1 fun2 fun3 的資料整合起來

    var allResults = []; // new array
    func1(function(err1, result1){
        if(err1) throw err1;
        allResults.push(result1);
    
        func2(function(err2, result2){
            if(err2) throw err2;
            allResults.push(result2);
    
            func3(function(err3, result3){
                if(err3) throw err3;
                allResults.push(result3);
    
                console.log(allResults);
                // allResults = [result1, result2, result3]
            });
        });
    });
    

    如果用 async

    // series 會按照順序執行 function
    // 而且可以把結果全部彙整起來
    async.series([
        function(next){
            func1(function(err1, result1){
                next(err1, reuslt1);
            });
        },
        function(next){
            func2(function(err2, result2){
                next(err2, reuslt2);
            });
        },
        function(next){
            func3(function(err3, result3){
                next(err3, reuslt3);
            });
        }
    ], function(errs, results){
        if(errs) throw errs;    // errs = [err1, err2, err3]
        console.log(results);   // results = [result1, result2, result3]
    });
    

    可以很方便的彙整資料
    也不用多宣告一個 results


    async.parallel

    使用時機 :
    fun1, fun2, fun3 平行執行
    將執行的結果整合起來
    與 series 不同的是
    parallel 的多個 function 會同時執行
    所以不能互相衝突(存取相同檔案…等等)

    async.parallel([
        function(finish){
            fun1(function(err1, rst1){
                finish(err1, rst1);
                // 完成所有動作後 finish
            });
        },
        function(finish){
            fun1(function(err2, rst2){
                finish(err2, rst2);
            });
        },
        function(finish){
            fun1(function(err3, rst3){
                finish(err3, rst3);
            });
        }
    ], function(errs, results){
        if(errs) throw errs;    // errs = [err1, err2, err3]
        console.log(results);   // results = [result1, result2, result3]
    });
    

    parallel 跟 series 滿像的都是把結果整合起來
    但因為是平行效率比較高
    但是要小心不要衝突


    基本的 async 介紹就到這裡
    希望大家看完這篇有比較了解 async 在幹嘛 ~
    要看更進階的功能可以到他們的 GitHub

    這是第二篇
    [JavaScript] 如何用 async 控制流程 (二)
    會介紹一些比較難的流程控制

  • 相关阅读:
    团队作业六
    团队作业五
    团队作业(四)
    团队作业(三)
    团队作业二
    宇宙圣斗士队介绍
    团队作业之七
    团队作业之六
    团队作业五
    奥特曼小分队之四(Work Breakdown Structure)
  • 原文地址:https://www.cnblogs.com/time-is-life/p/9204707.html
Copyright © 2011-2022 走看看