北鸟南游的博客 北鸟南游的博客
首页
  • 前端文章

    • JavaScript
    • Nextjs
  • 界面

    • html
    • css
  • 计算机基础
  • 后端语言
  • linux
  • mysql
  • 工具类
  • 面试相关
  • 图形学入门
  • 入门算法
  • 极客专栏
  • 慕课专栏
  • 电影资源
  • 儿童动漫
  • 英文
关于我
归档
GitHub (opens new window)
首页
  • 前端文章

    • JavaScript
    • Nextjs
  • 界面

    • html
    • css
  • 计算机基础
  • 后端语言
  • linux
  • mysql
  • 工具类
  • 面试相关
  • 图形学入门
  • 入门算法
  • 极客专栏
  • 慕课专栏
  • 电影资源
  • 儿童动漫
  • 英文
关于我
归档
GitHub (opens new window)
  • JavaScript

    • 原生js
      • 33个非常实用的JavaScript一行代码
      • Es6新增属性Promise对象
      • Es6新增属性generator对象
        • generator对象的创建
        • yield的传参使用
        • yield的返回值使用
        • 使用runner进行多步数据获取
        • async await属性
      • JavaScript数组遍历的方法
      • JavaScript防抖和节流
      • ajax的跨域和jsonp的使用
      • exports和module.exports以及export的区别
      • js正则表达式深度解析
      • js运行过程分析
      • vite开发原生js插件
      • 你不知道的JavaScript(上)
    • vue
    • react
    • node
    • nextjs
    • 其它框架
  • 界面

  • front
  • javascript
  • js
北鸟南游
2018-01-16
目录

Es6新增属性generator对象

# generator对象的创建

generator函数创建,在一般的函数函数名前添加*,就可以将一般函数转换为generator函数;

	function *show(){
		console.log("first");
		yield;
		console.log("second")
	}
	var gen = show();
	gen.next();  // first
	gen.next();  // second
1
2
3
4
5
6
7
8

# yield的传参使用

yield传参和返回值

	function *gen(x){
		alert(1);
		console.log("x", x) // x 11
		let a = yield;
		alert(2);
		alert(a); //66
	}
	let genObj = gen(11);
	console.log(genObj)
	genObj.next(99); //第一个next传参不起作用,参数要在函数中设置
	genObj.next(66); //这个参数可以传递给yield
1
2
3
4
5
6
7
8
9
10
11

# yield的返回值使用

	function *gen(){
		alert(1);
		yield 66; //yield后面跟的值,相当于第一个函数的返回值
		alert(2);
	}
	let genObj = gen();
	console.log(genObj)
	let res1 = genObj.next(); 
	let res2 = genObj.next();
	console.log(res1)  //  {value: 66, done: false}
	console.log(res2)  //  {value: undefined, done: true}
1
2
3
4
5
6
7
8
9
10
11

# 使用runner进行多步数据获取

先下载安装一个generator-runner-blue的插件

	runner(function *(){
		let data1 =yield axios.get("./data/1.txt").then(response => response.data ).catch(err => console.log(err));
		let data2 =yield axios.get("./data/2.txt").then(response => response.data ).catch(err => console.log(err));
		let data3 =yield axios.get("./data/3.txt").then(response => response.data ).catch(err => console.log(err));

		console.log(data1, data2, data3)
	})

1
2
3
4
5
6
7
8

generator更适合处理带有异步的请求数据,promise使用请求多个接口的数据 带有逻辑判断的回调

	runner(function *(){
	     let userData = yield axios.get("./data/1.txt").then(response => response.data ).catch(err => console.log(err));

	     if(userData.type == "vip"){
	           let items= yield axios.get("./data/vip.txt").then(response => response.data ).catch(err => console.log(err));

	     }else{
	           let items= yield axios.get("./data/user.txt").then(response => response.data ).catch(err => console.log(err));

	     }
	})
1
2
3
4
5
6
7
8
9
10
11

# async await属性

使用Es7的async await属性可以不用下载runner.js脚本,该方法其实是generator的一个语法糖

	async function getData(){
		let data1 = await axios.get("./data/1.txt").then(response => response.data).catch(err => console.log(err));
		let data2 = await axios.get("./data/2.txt").then(response => response.data).catch(err => console.log(err));
		let data3 = await axios.get("./data/3.txt").then(response => response.data).catch(err => console.log(err));

		console.log(data1, data2, data3)
	}

1
2
3
4
5
6
7
8
编辑 (opens new window)
上次更新: 2025/04/19, 14:22:11
Es6新增属性Promise对象
JavaScript数组遍历的方法

← Es6新增属性Promise对象 JavaScript数组遍历的方法→

最近更新
01
色戒2007
04-19
02
真实real
04-19
03
Home
更多文章>
Theme by Vdoing | Copyright © 2018-2025 北鸟南游
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式