爱彩乐十一选五

首頁 > 上網技巧 > 電腦小技巧 > 使用Async.js簡化你的JavaScript代碼

使用Async.js簡化你的JavaScript代碼

時間:2019-10-08 16:33 作者:QQ地帶 我要評論

Async.js 是一個功能強大的庫,主要是基于 Node.js 開發,他本身也是 JavaScript 代碼,在 Web 瀏覽器中也可以單獨使用,它可以簡化 Node.js 異步操作的書寫,使代碼更容易被讀懂。
 
安裝Async.js
我們可以使用Node.js的包管理器npm直接安裝它,在shell中輸入:
 
npm install async
或者更改package.json文件,自定義安裝的細節:
 
{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    ......
        "async":"~0.9.0"
  }
}
然后運行 npm install 安裝完成后,在需要使用它的文件中加入:
 
var async = require('async');
Series
使用series可以簡化流程運行的異步函數,現在構想一個這樣的場景,我需要執行一組動作,喝水 -> 吃飯 -> 打開電腦,通常的代碼編寫應該這樣:
 
function normalFunc() {
    console.log("Normal function Run");
    drinkWater(function (error,data) {
        if(error) {
            console.log("error: ",error,"msg: ",data);
        } else {
            console.log("drink water finish, I will eat food");
            eatFood(function(error,data) {
                if(error) {
                    console.log("error: ",error,"msg: ",data);
                } else {
                    console.log("eat food finish, I will open mac");
                    openMac(function(error,data) {
                        if(error) {
                            console.log("error: ",error,"msg: ",data);
                        } else {
                            //do something after open mac
                            console.log("Mac is open, all action done");
                        }
                    });
                }
            });
        }
    });
}
當異步調用超過兩次嵌套,代碼會變得不直觀。使用async.series可以優化:
 
function seriesFunc() {
    async.series([
        function(callback) {
            console.log("Series function Run");
            drinkWater(function(error,data) {
                callback(error,data);
            });
        },
        function(callback) {
            console.log("drink water finish, I will eat food");
            eatFood(function(error,data) {
                callback(error,data);
            });
        },
        function(callback) {
            console.log("eat food finish, I will open mac");
            openMac(function(error,data) {
                callback(error,data);
            });
        }],
        function(error,result) {
            if(error) {
                console.log("error: ",error,"msg: ",result);
            }
            else {
                console.log("Mac is open, all action done");
            }
        }
    );
}
為了測試這個例子,我編寫三個函數:
 
function drinkWater(callback) {
    callback(null,null);
}
function eatFood(callback) {
    callback(null,null);
}
function openMac(callback) {
    callback(null,null);
}
接下來,我們測試這些函數,在console中的顯示是下面的代碼:
 
Normal function Run
drink water finish, I will eat food
eat food finish, I will open mac
Mac is open, all action done
Series function Run
drink water finish, I will eat food
eat food finish, I will open mac
Mac is open, all action done
這樣看,我們達到了相同的效果。我們再測試出錯的情況,將openMac函數更改成下面的代碼:
 
function openMac(callback) {
    callback(1,"I can't find my mac");
}
再測試這兩個函數:
 
Normal function Run
drink water finish, I will eat food
eat food finish, I will open mac
error:  1 msg:  I can't find my mac
Series function Run
drink water finish, I will eat food
eat food finish, I will open mac
error: 1 msg: [ null, null, 'I can\'t find my mac' ]
我們能發現 series 的 result是一個數組。series中的callback被執行后,無論動作的結果是成功還是失敗,都會在result中添加一個數據。另一方面,我們也可以通過result中元素的數量,判斷 series 執行了幾個函數。
 
Waterfall
另一個有用函數是 waterfall 。它和 series 一樣,可以簡化流程運行的異步函數。不同點是它可以在流程執行的過程中傳遞參數。
 
例如,我需要在異步函數中返回一些飲品或食物的信息,我需要更改
 
function drinkWater(callback) {
    callback(null,"Cola");
}
function eatFood(callback) {
    callback(null,"Hamburger");
}
function openMac(callback) {
    callback(null,"chrome_6494_1.html' target='_blank'>Chrome");
}
然后添加:
 
function waterFunc() {
    async.waterfall([
        function(callback) {
            console.log("Water Fall Run");
            drinkWater(function(error,data) {
                callback(error,data);
            });
        },
        function(data,callback) {
            console.log("drink ",data," finish, I will eat food");
            eatFood(function(error,data) {
                callback(error,data);
            });
        },
        function(data,callback) {
            console.log("eat ",data," finish, I will open mac");
            openMac(function(error,data) {
                callback(error,data);
            });
        }],
        function(error,result) {
            if(error) {
                console.log("error: ",error,"msg: ",result);
            }else {
                console.log("Mac ",result," is open, all action done");
            }
        }
    );
}
每一次運行函數的回調結果都會傳給下一個動作,最后的result與series不同,是最后一次執行動作callback中傳遞的值。運行測試結果為:
 
Water Fall Run
drink  Cola  finish, I will eat food
eat  Hamburger  finish, I will open mac
Mac  Chrome  is open, all action done
然后再來測試出錯的情況,更改:
 
function eatFood(callback) {
    callback(1,"not enough money");
}
再運行的結果是:
 
Water Fall Run
drink  Cola  finish, I will eat food
error:  1 msg:  not enough money
總結
使用Node.js中的 Async 可以將復雜的邏輯表現的更直觀。但如果邏輯只有一次回調,就不建議使用Async了,我認為這會無意義的增加一些運行的成本。

標簽: Async.js
頂一下
(0)
0%
踩一下
(0)
0%

Google提供的廣告

爱彩乐十一选五 经典单机麻将二人麻将 ag金拉霸赢500万 排球直播频道朱婷 开心农场怎么玩 二八杠棋牌正规 什么职业只要刻苦就能赚钱 北京pk赛车人工计划群 梦幻西游辅助赚钱 万人棋牌手机版下载 电玩城千炮捕鱼技巧 德州棋牌疯狂版 传奇倒卖元宝商人赚钱吗 北京福彩网pk10走势图 皇家国际平台登录 稳赚包六肖三期必出一期 捕鱼达人 天天送金币