[Javascript] 數據同步處理 & 非同步處理: Aigle

日期：
Aigle
https://github.com/suguru03/aigle

Aigle doc
https://suguru03.github.io/aigle/docs/Aigle.html

Aigle vs Bluebird
https://hackernoon.com/aigle-vs-bluebird-5ed3becb4c4c

[Aigle] How to use Lo-Dash functions with Async/Await
https://hackernoon.com/how-to-use-lo-dash-functions-with-async-await-b0be7709534c

Aigle 很少人知道這套件，他是由 Javascript 所撰寫的數據兼非同步 Pormise 處理的套件，可說結合 lodash 與 bluebird 的風格，非常強大。

會知道這套件主要是 webpack 4 出來後，內部修改的地方提到使用 Neo-Async 置換原本的 async 套件，才關注到 suguru03 這位大神，而他於 Neo-Async 主頁所建議的 Promise and async/await 處理方式，就是他自己所寫的 Aigle。

詳細的函式與教學可詳見 Aigle 的說明文件，若已經用過 lodash 與 bluebird 的朋友，大概就知道他們很多功能被 Aigle 合併了。

需注意 Aigle 網頁直接載入會有些狀況，因 Aigle 網頁載入會複寫 window.Promise，得要自己注意。另若需將 Aigle mixin 至 lodash 內，則需要使用 AMD 模組化載入方式才能使用。此外，若很習慣用 lodash 或 ramda 的函數式語言(fp)如柯里化(curry)來處理數據流的話，那 Aigle 還不能支援這些功能，故要再自己依照實際需求來衡量了。


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Aigle.js & Lodash.js Mixin Demo</title>

    <!--使用jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!--使用lodash-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

    <!--使用require-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>

    <!--aigle-es5 cdn位置-->
    <script>
        let cdn = 'https://cdn.jsdelivr.net/npm/aigle@1.13.0/aigle-es5.min.js';
    </script>

</head>
<body>

    <div id="app"></div>

    <script>

        console.log = function (c, v) {
            //覆蓋log, 使用jQuery輸出至網頁
            $('#app').append('<div style="padding:3px;">' + 'log: ' + c + ', ' + v + '</div>')
        }

        //aigle-es5必須使用AMD加載, 故前端引入require.js來加載
        require([cdn], function (Aigle) {

            //將Aigle掛入lodash
            Aigle.mixin(_);

            function delay(ms, result) {
                return new Promise(function (resolve, rejest) {
                    _.delay(function () {
                        resolve(result);
                    }, ms)
                });
            }

            function ex1() {
                //測試map的sync與async

                let array = [1, 2, 3];

                let r_sync = _.map(array, n => n * 2);
                console.log('ex1 sync(lodash)', r_sync);

                Aigle.map(array, n => delay(10, n * 2))
                    .then(function (r_async) {
                        console.log('ex1 async(aigle)', r_async);
                    });

            }

            function ex2() {
                //測試find的sync與async

                let array = [1, 2, 3];

                let r_sync = _.find(array, n => n === 2);
                console.log('ex2 sync(lodash)', r_sync);

                Aigle.find(array, n => delay(10, n === 2))
                    .then(function (r_async) {
                        console.log('ex2 async(aigle)', r_async);
                    });

            }

            function ex3() {
                //測試chain連鎖計算函數的sync與async

                let array = [1.1, 1.4, 2.2];

                let r_sync = _.chain(array)
                    .map(n => n * 2) // [2.2, 2.8, 4.4]
                    .uniqBy(Math.floor) // [2.2, 4.4]
                    .sum() // [6.6]
                    .times() // [0, 1, 2, 3, 4, 5]
                    .value();
                console.log('ex3 sync(lodash)', r_sync);

                let ag_async = Aigle.resolve(array)
                    .map(n => delay(10, n * 2)) // [2.2, 2.8, 4.4]
                    .uniqBy(Math.floor) // [2.2, 4.4]
                    .sum() // [6.6]
                    .times(); // [0, 1, 2, 3, 4, 5]
                ag_async
                    .then(function (r_async) {
                        console.log('ex3 async(aigle)', r_async);
                    });

            }

            //執行
            ex1();
            ex2();
            ex3();

        });

    </script>

</body>
</html>


載入後畫面為︰



#Aigle, Javacript, lodash, bluebird, ramda, pormise

留言

張貼留言