JS异步编程之Generator

快来打我* 2022-03-14 10:00 201阅读 0赞

#### 前言 ####

ES6 中提出一个叫生成器（Generator）的概念，执行生成器函数，会返回迭代器对象（Iterator），这个迭代器对象可以遍历函数内部的每一个状态。

function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    // 通过执行生成器返回迭代器对象
    var helloWorldIterator = helloWorldGenerator();
    
    helloWorldIterator.next(); 
    // { value: "hello", done: false }
    
    helloWorldIterator.next(); 
    // { value: "world", done: false }
    
    helloWorldIterator.next(); 
    // { value: "ending", done: true }
    
    helloWorldIterator.next(); 
    // { value: undefined, done: true }
    复制代码

迭代器对象通过调用 next() 方法，遍历下一个内部状态，生成一个值，这也是 Generator 名字的由来。

#### 一、generator 的异步调用 ####

每当 generator 生成一个值，程序会挂起，自动停止执行，随后等待下一次执行，直到下一次调用 next() 方法，但并不影响外部主线程其他函数的执行。

generator 让函数执行过程有了同步的特点，基于这个特点，我们将异步调用和生成器结合起来：

先后打印 "hello China!", "hello Wolrd!", "hello Earth!";

function fetch(word) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello " + word);
            }, 2000)
        })
    }
    
    function* gen() {
        try {
            const api1 = yield fetch("China!");
            console.log(1);
    
            const api2 = yield fetch("World!");
            console.log(2);
            
            const api3 = yield fetch("Earth!");
            console.log(3);
        } catch(error) {
            console.log(error);
        }
        
    }
    
    const iterator = gen();  // 返回迭代器对象
    
    const result1 = iterator.next().value;
    
    result1
    .then(res1 => {
        console.log(res1)
        return iterator.next().value;
    })
    .then(res2 => {
        console.log(res2)
        return iterator.next().value;
    })
    .then(res3 => {
        console.log(res3)
        return iterator.next().value;
    })
    复制代码

每次调用迭代器的 next 方法，会返回一个 Promise 对象，通过 Promise 对象状态从 pending 转移到 fullfilled 状态，可以在 .then() 方法后执行下一个异步方法。

#### 二、Generator 自执行 ####

从第二节中可以看出，Generator 每次调用异步方法，都要手动执行一次 iterator.next()，通过递归 iterator.next() 我们就不用再手动执行 next() 方法了。

function fetch(word) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello " + word);
            }, 2000)
        })
    }
    
    function* gen() {
        try {
            const api1 = yield fetch("China!");
            console.log(1);
    
            const api2 = yield fetch("World!");
            console.log(2);
            
            const api3 = yield fetch("Earth!");
            console.log(3);
        } catch(error) {
            console.log(error);
        }
        
    }
    
    function co(gen) {
        const g = gen();
        
        function next(data) {
            const result = g.next(data);
            if(result.done) return;
            result.value.then(data => {
                console.log(data);
                next(data);
            })
        }
        
        next();
    }
    
    co(gen);
    复制代码

#### 三、在迭代器中抛出错误 ####

迭代器除了能在 next() 方法中传递参数外，还能通过 iterator.throw 方法捕捉到错误，从而增强了异步编程的错误处理能力。

function fetch(word) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("hello " + word);
            }, 2000)
        })
    }
    
    function* gen() {
        try {
            const api1 = yield fetch("China!");
            console.log(1);
    
            const api2 = yield fetch("World!");
            console.log(2);
            
            const api3 = yield fetch("Earth!");
            console.log(3);
        } catch(error) {
            console.log(error);  // Error: 抛出一个错误
        }
        
    }
    
    const iterator = gen();  // 返回迭代器对象
    
    const result1 = iterator.next().value;
    
    result1
    .then(res1 => {
        console.log(res1)
        iterator.throw(new Error("抛出一个错误"))
        return iterator.next().value;
    })
    .then(res2 => {
        console.log(res2)
        return iterator.next().value;
    })
    .then(res3 => {
        console.log(res3)
        return iterator.next().value;
    })
    复制代码

调用了 iterator.throw 方法后，错误就能被抛出被生成器中的中的 try catch 捕捉到，且阻止后面的代码继续执行。

#### 四、Generator 应用场景 ####

Generator 最令人兴奋的地方在于，生成器中的异步方法看起来更像是同步执行。不好的地方在于执行过程比较生硬。

#### 总结 ####

Generator 生成具有 Symbol.iterator 属性的迭代器对象，迭代器具有 next 方法，能够无阻塞地将代码挂起，下次调用 .next() 方法再恢复执行。

用 Generator 实现异步编程只是一个 hack 用法，Generator 的语法糖 async & await 则能将异步编程写得更简洁优雅。

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关异步编程--Promise-＞Generator-＞Async/Await-＞异步生成器

Promise ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

忘是亡心i/ 2022年11月14日 00:50/ 0 赞/ 194 阅读

相关 JS异步编程方案

同步编程同步编程指的是当一个任务在执行时，另一个任务需要等到之前的任务执行完毕才能继续执行，换句话说，就是一段代码的执行会阻塞另一段代码的执行，这就叫做同步编程。

素颜马尾好姑娘i/ 2022年10月30日 04:27/ 0 赞/ 155 阅读

相关 ES6 -- 异步编程神器2：Generator

Generator是ES6提供的一种全新的异步编程方案，它的基本语法如下： function myFirstBasicGenerator() { yie

待我称王封你为后i/ 2022年06月16日 04:40/ 0 赞/ 186 阅读

相关【前端面试】 JS异步编程

callback回调方法 function fn1 () { console.log('Function 1') } fun

柔光的暖阳◎/ 2022年05月31日 02:23/ 0 赞/ 197 阅读

相关 js异步编程：回调、发布订阅、Promise、async、generator

总结目前异步编程最好的解决方案: async、await 自带执行器链式调用像写同步代码一样处理异步任务 await虽好但是不能贪杯，两个

深碍√TFBOYSˉ_/ 2022年04月24日 13:40/ 0 赞/ 215 阅读

相关 JavaScript异步之generator函数

接触过Ajax请求的会遇到过异步调用的问题，为了保证调用顺序的正确性，一般我们会在回调函数中调用，也有用到一些新的解决方案如Promise相关的技术。在异步编程中，还有一种

布满荆棘的人生/ 2022年03月29日 09:54/ 0 赞/ 269 阅读

相关 JS异步编程之Generator

前言 ES6 中提出一个叫生成器（Generator）的概念，执行生成器函数，会返回迭代器对象（Iterator），这个迭代器对象可以遍历函数内部的每一个状态。

快来打我*/ 2022年03月14日 10:00/ 0 赞/ 202 阅读

相关 [面试专题]JS异步之Promise,Generator,Async

JS异步之Promise,Generator,Async -------------------- Promise 1. 解决的问题:回调地狱 2. Prom

Bertha 。/ 2022年02月24日 04:14/ 0 赞/ 268 阅读

相关 JS异步编程实践理解

回顾JS异步编程方法的发展，主要有以下几种方式： 1. Callback 2. Promise 3. Generator 4. Async 需求显示购物车商

柔情只为你懂/ 2022年01月29日 04:23/ 0 赞/ 234 阅读

相关 JS的异步编程

1、首先了解JS执行环境是单线程所谓的单线程：就是指一次只能完成一件任务。若有多个任务时，就必须排队，等前面一个任务完成之后，再执行后面一个任务单线程的缺点：任务耗时很

骑猪看日落/ 2022年01月12日 08:43/ 0 赞/ 250 阅读