其他分享
首页 > 其他分享> > 15_Generator应用

15_Generator应用

作者:互联网

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /*  Generator 函数的异步应用
    
            一、传统方法
            二、基本概念
            三、Generator函数
            四、Thunk函数
            五、co模块       
            
            异步编程对 Javascript 语言太重要。
            Javascrit语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。
    
            下面主要介绍 Generator 函数如何完成异步操作。
        */

        /*  一、传统方法:
    
                es6诞生之前,异步编程的方法,大概有下面四种:
                - 回调函数
                - 时间监听
                - 发布/订阅
                - Promise 对象      
                
                Generator 函数将 Javascript 异步编程带入了一个全新的阶段。
        */

        /*  二、基本概念
    
                所谓“异步”,简单来说就是一个任务不是连续完成的,可以理解成该任务被人为分成两段,
                先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。
    
                比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。
                然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。
                这种不连续的执行,就叫做异步。
    
                相应地,连续的执行就叫做同步。
                由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着。        
        */

        /* 回调函数
    
            Javascript 语言对异步编程的实现,就是回调函数。
            所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。
            回调函数的英语名字是 callback,直译过来就是“重新调用”。
        */

        // 读取文件进行处理,是这样写的:
        fs.readFile('/etc/passwd', 'utf-8', function (err, data) {
            if (err) throw err;
            console.log(data)
        })

        // 上面代码中,readFile 函数的第三个函数,就是回调函数,也就是任务的第二段。
        // 等到操作系统返回了 /etc/passwd 这个文件以后,回调函数才会执行。

        // 一个有趣的问题是,为什么 Node 约定,回调函数的一个参数,必须是错误对象err(如果没有错误,该参数就是null?)

        // 原因是执行分成两段,第一段执行完成以后,任务所在的上下文环境就已经结束了。
        // 在这以后抛出的错误,原来的上下文环境已经无法捕捉,只能当做参数,传入第二段。


        /* Promise
    
            回调函数本身并没有问题,它的问题出现在多个回调函数嵌套。
        */

        // 假定读取 A 文件之后,再读取 B 文件,代码如下:
        fs.readFile(fileA, 'utf-8', function (err, data) {
            fs.readFile(fileB, 'utf-8', function (err, data) {
                // ...
            })
        })

        /*  不难想象,如果依次读取两个以上的文件,就会出现多重嵌套。
            代码不是纵向发展而是横向发展,很快就会乱成一团,无法管理。
            因为多个异步操作形成了强耦合,只要有一个操作需要修改,它的上层回调函数和下层回调函数,可能都要跟着修改。
            这种情况就称为“回调函数地狱”(callback hell)。
    
            Promise 对象就是为了解决这个问题而提出的。它不是新的语法功能,而是一种新的写法,
            允许将回调函数的嵌套,改成链式调用。        
        */

        // 采用 Promise,连续读取多个文件,写法如下:
        var readFile = require('fs-readFile-promise');

        readFile(fileA)
            .then(function (data) {
                console.log(data.toString())
            })
            .then(function (data) {
                return readFile(fileB);
            })
            .then(function (data) {
                console.log(data.toString());
            })
            .catch(function (err) {
                console.log(err);
            });

        /*  上面代码中,使用了 fs-readFile-promise 模块,
            它的作用就是返回一个 Promise版本的 readFile 函数。
    
            Promise 提供 then 方法加载回调函数,catch 方法捕捉执行过程中抛出的错误。
            
            可以看到,Promise 的写法只是回调函数的改进,使用 then 方法以后,异步任务的两段执行看的更清楚了。
            除此之外,并无新意。
    
            Promise 的最大问题是代码冗余,原来的任务被 Promise 包装了一下,不管什么操作,
            一眼看去都是一堆 then,原来的语义变得很不清楚。
    
            那么,有没有更好的写法呢?
        */

        /*  三、Generator 函数
        
            协程
    
            传统的编程语言,早有异步编程的解决方案(其实是多任务的解决方案)。其中有一种叫做“协程”,
            意思是多个线程互相协作,完成异步任务。
    
            协程有点像函数,又有点像线程。它的运行流程大致如下:
            - 第一步,协程 A 开始执行。
            - 第二步,协程 A 执行到一半,进入暂停,执行权转移到协程 B.
            - 第三步,(一段时间后)协程 B 交还执行权。
            - 第四步,协程 A 恢复执行。        
            
            上面流程的协程 A,就是异步任务,因为它分成两段(或多段)执行。
        */

        // 举例来说,读取文件的协程写法如下。
        function* asyncObj() {
            // ...
            var f = yield readFile(fileA)
            // ...
        }

        /* 上面代码的函数 asyncObj 是一个协程,它的奥妙就在其中的 yield命令。
            它表示执行到此处,执行权将交给其他协程。也就是说,yield 命令是异步两个阶段的分界线。
    
            协程遇到 yield 命令就暂停,等到执行权返回,再从暂停的地方继续往后执行。
            它的最大优点,就是代码的写法非常像同步操作,如果去除 yield 命令,简直一模一样。        
        */

        /* 协程的 Generator 函数实现
    
            Generator 函数就是协程在 ES6 的实现,最大特点就是可以交出函数的执行权,(即暂停执行)。
    
            整个 Generator 函数就是一个封装的异步任务,或者说异步任务的容器。
            异步操作需要暂停的地方,都用 yield 语句注明。
        */

        // Generator 函数的执行方法如下:

        function* gen(x) {
            var y = yield x + 2;
            return y;
        }

        var g = gen(1);
        g.next() // { value: 3, done: false }
        g.next() // { value: undefined, done: true }

        /* Generator 函数的数据交换和错误处理
             Generator 函数可以暂停执行和恢复执行,这是它能封装异步任务的根本原因。

             除此之外,它还有两个特性,使它可以作为异步编程的完整解决方案:函数体内外的数据交换和错误处理机制。

             next 返回值的 value 属性,是 Generator 函数向外输出数据;
             next 方法还可以接受参数,向 Generator 函数体内输入数据。
        */
        function* gen(x) {
            var y = yield x + 2;
            return y;
        }

        var g = gen(1);
        g.next();
        g.next(2)
        /*  上面代码中,第一个 next 方法的 value 属性,返回表达式 x + 2 的值 3 。
            第二个方法带有参数 2,这个参数可以传入 Genenrator 函数,作为上个阶段异步任务的返回结果,被函数体内的变量 y 接收。

            因此,这一步的 value 属性,返回的就是 2 (变量 y 的值)

            Generator 函数内部还可以部署错误处理代码,捕获函数体内抛出的错误。
        */
        function* gen(x) {
            try {
                var y = yield x + 2;
            } catch (e) {
                console.log(e) // 出错了
            }
            return y;
        }

        var g = gen(1);
        g.next();
        g.throw('出错了');
        /*  上面代码的最后一行,Generator 函数体外,
            使用指针对象的 throw 方法抛出的错误,可以被函数体内的 try...catch代码块捕获。
            这意味着,出错的代码与处理错误的代码,实现了时间和空间上的分离,这对于异步编程无疑是很重要的。
        */


        /*  异步任务的封装
 
             下面看看如何使用 Generator 函数,执行一个真实的异步任务。       
        */
        var fetch = require('node-fetch');
        function* gen() {
            var url = 'https://api.github.com/users/github';
            var result = yield fetch(url);
            console.log(result.bio)
        }
        /* 上面的代码中,Generator 函数封装了一个异步操作,该操作先读取一个远程接口,
            然后从 JSON 格式的数据解析信息。就像前面说过的,这段代码非常像 同步操作,除了加上 yield 命令。
        */
        // 执行这段代码的方法如下:
        var g = gen();
        var result = g.next();
        result.value.then(function (data) {
            return data.json();
        }).then(function (data) {
            g.next(data);
        })
        /* 上面代码中,
            先执行 Generator 函数,获取遍历器对象,
            然后使用next 方法(第二行),执行异步任务的第一阶段。
            由于 fetch 模块返回的是一个 Promise 对象,
            因此用 then 方法调用下一个 next 方法。

            可以看到,虽然 Generator 函数将异步操作表示得很简洁,
            但是流程管理却不方便(即何时执行第一阶段、何时执行第二阶段)。
        */

        /*  四、Thunk 函数:

            Thunk 函数是自动执行 Generator 函数的一种方法。        
        */

        /*  参数的求值策略

            Thunk 函数早在上个世纪 60 年代就诞生了。

            那时,编程语言刚刚起步,计算机学家还在研究,编译器怎么写比较好。
            一个争论的焦点是“求值策略”,即函数的参数到底应该何时求值。        
        */
        var x = 1;
        function f(m) {
            return m * 2;
        }
        console.log(f(x + 5)) // 12

        // 产生两种意见:传值调用 和 传名调用

        /* Thunk 函数的含义:
            
            编译器的 “传名调用” 实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体。
            这个临时函数就叫做 Thunk 函数。
        */

        function f(m) {
            return m * 2;
        }
        f(x + 5);

        // 等同于:

        var thunk = function () {
            return x + 5;
        }
        function f(thunk) {
            return thunk() * 2;
        }
        // 上面代码中,函数 f 的参数 x + 5 被一个函数替换了。
        // 凡是用到原参数的地方,对 Thunk 函数求值即可。

        // 这就是 Thunk 函数的定义,它是“传名调用” 的一种实现策略,用来替换某个表达式。

        /*  Javascript 语言的 Thunk 函数

            Javascritp 语言是传值调用,它的 Thunk 函数含义有所不同。
            在 Javascript 语言中,Thunk 函数替换的不是表达式,而是多参数函数,
            将其替换成一个只接受回调函数作为参数的单参数函数。
        */

        // 例:
        // 正常版本的 readFile (多参数版本)
        fs.readFile(fileName, callback);
        // Thunk 版本的 readFile (单参数版本)
        var Thunk = function (fileName) {
            return function (callback) {
                return fs.readFile(fileName, callback);
            };
        };
        /*  上面代码中,fs 模块的 readFile 方法是一个多参数函数,两个参数分别为文件名和回调函数。
            经过转换器处理,它变成了一个单参数函数,只接受回调函数作为参数。
            这个单参数版本,就叫做 Thunk 函数。

            任何函数,只要参数有回调函数,就能写成 Thunk 函数的形式。
        */

        // 下面是一个简单的 Thunk 函数转换器:





    </script>
</body>

</html>```

标签:function,异步,15,函数,Generator,readFile,Thunk,应用
来源: https://blog.csdn.net/weixin_45774432/article/details/116081560