ES6 生成器生成器应用----异步任务控制

最新推荐文章于 2020-11-10 17:51:33 发布

苟盛

最新推荐文章于 2020-11-10 17:51:33 发布

阅读量184

点赞数

分类专栏： ES6/ES7 文章标签： js javascript 生成器 es6 前端

本文链接：https://blog.youkuaiyun.com/function_zzc/article/details/105429287

版权

ES6/ES7 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了ES6中的生成器，它既是迭代器又是可迭代对象。通过生成器函数创建，使用`yield`关键字来产生迭代数据。在生成器函数中，每次调用`next()`会运行到下一个`yield`。注意，生成器函数可以有返回值，并且可以接收`next()`方法传递的参数。此外，还提到了生成器的`return`方法用于提前结束迭代，以及`throw`方法用于在生成器中抛出错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生成器 (Generator)

什么是生成器：
生成器是一个通过构造函数Generator创建的对象，生成器既是一个迭代器，同时又是一个可迭代对象

2.如何创建生成器？
生成器的创建，必须使用生成器函数（Generator Function）

如何书写一个生成器函数呢？

要将*放到函数关键字后面或者函数名前面


	function *metod() {
	
	}
	function* metod() {
	
	}
	{
		* metod() {
	
		}
	}
	//正是一个生成器函数，该函数一定返回一个生成器

生成器函数内部是如何执行的？

生成器函数内部是为了给生成器的每次迭代提供的数据

每次调用生成器的next方法，将导致生成器函数运行到下一个yield关键字位置

yield是一个关键字，该关键字只能在生成器函数内部使用，表达“产生”一个迭代数据。

有哪些需要注意的细节？

1). 生成器函数可以有返回值，返回值出现在第一次done为true时的value属性中
2). 调用生成器的next方法时，可以传递参数，传递的参数会交给yield表达式的返回值
3). 第一次调用next方法时，传参没有任何意义
4). 在生成器函数内部，可以调用其他生成器函数，但是要注意加上*号


	  function* t1(){
            yield "a"
            yield "b"
        }

        function* test() {
            yield* t1();
            yield 1;
            yield 2;
            yield 3;
        }

        const generator = test();

生成器的其他API

return方法：调用该方法，可以提前结束生成器函数，从而提前让整个迭代过程结束
throw方法：调用该方法，可以在生成器中产生一个错误


	 function* task() {
            const d = yield 1;
            console.log(d)
            // //d : 1
            const resp = yield fetch("http://101.132.72.36:5100/api/local")
            const result = yield resp.json();
            console.log(result);
        }

        run(task)

        function run(generatorFunc) {
            const generator = generatorFunc();
            let result = generator.next(); //启动任务（开始迭代）, 得到迭代数据
            handleResult();
            //对result进行处理
            function handleResult() {
                if (result.done) {
                    return; //迭代完成，不处理
                }
                //迭代没有完成，分为两种情况
                //1. 迭代的数据是一个Promise
                //2. 迭代的数据是其他数据
                if (typeof result.value.then === "function") {
                    //1. 迭代的数据是一个Promise
                    //等待Promise完成后，再进行下一次迭代
                    result.value.then(data => {
                        result = generator.next(data)
                        handleResult();
                    })
                } else {
                    //2. 迭代的数据是其他数据，直接进行下一次迭代
                    result = generator.next(result.value)
                    handleResult();
                }
            }
        }