co模塊的前端實(shí)現(xiàn)

Vixb 發(fā)布于2019-08-21 10:46 / 2286人閱讀

摘要：模塊的意義和原理在上已經(jīng)有詳細(xì)的介紹了，具體參見(jiàn)用法異常處理輸出結(jié)果應(yīng)該為源碼各種模塊加載方式的處理下面這倆函數(shù)是有用的主該函數(shù)會(huì)在異步過(guò)程執(zhí)行完畢后被調(diào)用會(huì)喚醒主函數(shù)繼續(xù)執(zhí)行到下一個(gè)或?yàn)橹埂?/p>

其實(shí)就是照著網(wǎng)上的介紹和co的源碼實(shí)現(xiàn)了一個(gè)自己用的前端async模塊。支持RequireJS和SeaJS，支持$.ajax。
有喜歡co但是不知道怎么用的前端朋友可以拿去用。

co模塊的意義和原理在sf上已經(jīng)有詳細(xì)的介紹了，具體參見(jiàn)：
http://segmentfault.com/a/1190000002732081

用法：

async(function* () {
    var a = yield Promise.resolve(1);
    console.log(a);
    var b = yield [Promise.resolve(2), Promise.resolve(3)];
    console.log(b);
    return 4;
}).then(function (value) {
    console.log(value);
}).catch(function (e) {
    // 異常處理
});

// 輸出結(jié)果應(yīng)該為 1 [2,3] 4

源碼：

/*global exports*/
"use strict";
(function (factory) {
    // 各種模塊加載方式的處理
    if (typeof define === "function" && define.amd) {
        define([], factory);
    } else if (typeof define === "function" && define.cmd) {
        define(function (require, exports, module) {
            module.exports = factory(jQuery);
        });
    } else if (typeof exports === "object") {
        exports.async = factory();
    } else {
        // window.async=factory();
    }
}(function () {
    // 下面這倆函數(shù)是有用的
    function async(generator) {
        // 主Promise
        return new Promise(function (resolve, reject) {
            var g = generator();
            /**
             *  該函數(shù)會(huì)在異步過(guò)程執(zhí)行完畢后被調(diào)用,會(huì)喚醒主函數(shù)繼續(xù)執(zhí)行到下一個(gè)yield或return為止。
             *  參數(shù)val為異步過(guò)程的結(jié)果，即promise.result。
             *  返回值為主函數(shù)內(nèi)yield或return的結(jié)果，
             *  如果是yield則必須為promise或可被autoPack包裝的對(duì)象，或者包含前兩者的數(shù)組
             */
            function next(val) {
            
                // 將上次運(yùn)行結(jié)果返回給主函數(shù)，令主函數(shù)繼續(xù)執(zhí)行到下一處中斷，并將結(jié)果存入result
                var result = g.next(val);
                // 暫存主函數(shù)運(yùn)行結(jié)果
                var promise = result.value;
                // 判斷主函數(shù)是否執(zhí)行完畢，執(zhí)行完畢則調(diào)用resolve完成主Promise,否則繼續(xù)執(zhí)行
                if (!result.done) {
                    // 判斷主函數(shù)提供的參數(shù)是否為數(shù)組，
                    // 如果不是數(shù)組則用autoPack封裝后通過(guò)then(next)綁定下一步流程。并通過(guò)catch(reject)拋出異常
                    // 如果是數(shù)組則對(duì)每個(gè)成員進(jìn)行封裝后用Promise.All打包，然后繼續(xù)執(zhí)行。
                    if (promise instanceof Array) {
                        Promise.all(promise.map(autoPack)).then(next).catch(reject);
                    } else {
                        autoPack(promise).then(next).catch(reject);
                    }
                } else {
                    resolve(promise);
                }
            }

            // 捕獲并通過(guò)reject拋出異常
            try {
                next();
            } catch (e) {
                reject(e);
            }
        })
    }

    // 自動(dòng)打包，可以將第三方實(shí)現(xiàn)的Promise工具打包為ES6標(biāo)準(zhǔn)的Promise
    // 目前僅支持jQuery.Promise
    function autoPack(target) {
        // 包裝$.ajax
        if (target.error) {
            return new Promise(function (resolve, reject) {
                target.done(resolve).error(reject);
            })
        } else {
            return target;
        }
    }

    return async;
}));