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

31 May 2016

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 控制流程 (二)
會介紹一些比較難的流程控制