co模块的前端实现

Vixb 发布于2019-08-21 10:46 / 2186人阅读

摘要：模块的意义和原理在上已经有详细的介绍了，具体参见用法异常处理输出结果应该为源码各种模块加载方式的处理下面这俩函数是有用的主该函数会在异步过程执行完毕后被调用会唤醒主函数继续执行到下一个或为止。

其实就是照着网上的介绍和co的源码实现了一个自己用的前端async模块。支持RequireJS和SeaJS，支持$.ajax。
有喜欢co但是不知道怎么用的前端朋友可以拿去用。

co模块的意义和原理在sf上已经有详细的介绍了，具体参见：
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) {
    // 异常处理
});

// 输出结果应该为 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 () {
    // 下面这俩函数是有用的
    function async(generator) {
        // 主Promise
        return new Promise(function (resolve, reject) {
            var g = generator();
            /**
             *  该函数会在异步过程执行完毕后被调用,会唤醒主函数继续执行到下一个yield或return为止。
             *  参数val为异步过程的结果，即promise.result。
             *  返回值为主函数内yield或return的结果，
             *  如果是yield则必须为promise或可被autoPack包装的对象，或者包含前两者的数组
             */
            function next(val) {
            
                // 将上次运行结果返回给主函数，令主函数继续执行到下一处中断，并将结果存入result
                var result = g.next(val);
                // 暂存主函数运行结果
                var promise = result.value;
                // 判断主函数是否执行完毕，执行完毕则调用resolve完成主Promise,否则继续执行
                if (!result.done) {
                    // 判断主函数提供的参数是否为数组，
                    // 如果不是数组则用autoPack封装后通过then(next)绑定下一步流程。并通过catch(reject)抛出异常
                    // 如果是数组则对每个成员进行封装后用Promise.All打包，然后继续执行。
                    if (promise instanceof Array) {
                        Promise.all(promise.map(autoPack)).then(next).catch(reject);
                    } else {
                        autoPack(promise).then(next).catch(reject);
                    }
                } else {
                    resolve(promise);
                }
            }

            // 捕获并通过reject抛出异常
            try {
                next();
            } catch (e) {
                reject(e);
            }
        })
    }

    // 自动打包，可以将第三方实现的Promise工具打包为ES6标准的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;
}));

GPU云服务器云服务器前端模块前端模块化 lua模块实现 php实现收银台模块

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86172.html

前端每周清单半年盘点之 Node.js 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。对该漏洞的综合评级为高危。目前，相关利用方式已经在互联网上公开，近期出现攻击尝试爆发的可能。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢...

kid143 2019-08-21 11:59 评论0 收藏0
前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿

摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...

liuchengxu 2019-08-20 16:23 评论0 收藏0
异步流程控制：7 行代码学会 co 模块

摘要：而在中是迭代器生成器，被创造性的拿来做异步流程控制了。当执行的时候，并不执行函数体，而是返回一个迭代器。行代码再看看文章开头的行代码首先生成一个迭代器，然后执行一遍，得到的是一个对象，里面再执行。广告招人：阿里巴巴招前端，在这里你可以享受大公司的福利和技术体系，也有小团队的挑战和成长空间。联系： qingguang.meiqg at alibaba-inc.com 首先请原谅我的标题...

tinna 2019-08-21 10:31 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
前端每周清单半年盘点之 JavaScript 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍，阐述了从提出到角力到流产的前世今生。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...

Vixb 2019-08-21 12:04 评论0 收藏0