async、await、generator

---

前言

最近在整理一些面试题，提到一些知识，在此作一梳理。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、async与await

它们是es7的新语法，用来解决异步操作的问题。很多人认为它是异步操作的终极解决方案。

1.async

async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数

	async function f1(){
		return "haha";
	}
	f1().then(function(a){
		console.log(a); //haha
	})

2.await

await 也是一个修饰符，只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值，如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为undefined

	async function f2(){
		console.log("haha");//先出haha
		var p = await new Promise((resolve,reject)=>{
			setTimeout(function(){
				resolve("xixi");
			},2000)
		});
		console.log(p);
		console.log("hehe");//两秒后xixi hehe 一起出
	}
	f2();

3.综合应用

await用在async内部，函数在执行时，只有当await有了结果后，函数才会向下继续执行

	function set(str,time){
		return new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve(str);
			},time);
		});
	}
	
	async function f3(){
		var a = await set("haha",1000);
		console.log(a);//等1秒出haha
		var b = await set("xixi",2000);
		console.log(b);//再等2秒出xixi
		var c = await set("heihei",3000);
		console.log(c);//再等3秒出heihei
	}
	f3();

二、generator函数

es6的新语法，叫做生成器函数，也是用来解决异步操作的问题，最大特点就是可以交出函数的执行权（即暂停执行）。

东西很多，先记基本的。

语法：与普通函数相比，在function关键字和函数名之间有个*号，与函数体内yield关键字配合执行，当函数执行到yield时暂停执行，只有调用对象的.next方法时才会继续进行。

注意事项：

• 1.在创建函数对象时，函数不会立即运行，而是要调用一次.next()才会开始运行；
• 2.next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。当 next 传入参数的时候，该参数会作为上一步yield的返回值
• 3.调用next方法返回一个json数据，{value:xxx,done:false} value是上一个yield的返回值，done代表函数的执行状态，是否完成。

1.基本语法

	function* f5(){
		yield 1;
		yield 2;
		yield 3;
		yield 4;
	}
	let ff = f5();
	console.log(ff.next());// { value: 1, done: false }
	console.log(ff.next());// { value: 2, done: false }
	console.log(ff.next());// { value: 3, done: false }
	console.log(ff.next());// { value: 4, done: false }
	console.log(ff.next());// { value: undefined, done: true }

2.可以使用for…of遍历yield后的返回值

	function* f5(){
		yield 1;
		yield 2;
		yield 3;
		yield 4;
	}
	for(let item of f5()){
		console.log(item);//遍历 1 2 3 4
	}

3.next()传入值

	function* f4(){
		console.log("开始");
		let a = yield "haha";
		console.log(a);
		let b = yield "xixi";
		console.log(b);
		let c = yield "heihei";
		console.log(c);
		console.log("结束");
	}
	let f = f4();//不会立即执行输出 开始，只有调用next才会开始
	var res = f.next();//输出 开始，启动生成器
	// f.next();//输出undefined next 方法不传入参数的时候，yield 表达式的返回值是 undefined 。当 next 传入参数的时候，该参数会作为上一步yield的返回值
	res = f.next(res.value);//输出 haha 状态{value:haha,done:false}
	res = f.next(20);//输出 20 状态{value:20,done:false}
	res = f.next(res.value);//输出 heihei 结束 状态{value:heihei,done:true}

4.generator异步操作

	function set(str,time){
		setTimeout(function(){
			ff.next(str);
			function set(str,time){
				setTimeout(function(){
					ff.next(str);
				},time);
			}
		},time);
	}
	function success(str){
		console.log(str);  //3秒后输出 xixi
	}
	function* f6(){
		let x =yield set("haha",1000);
		let y =yield set("xixi",2000);
		success(y);
	}
	let ff = f6();
	ff.next();

---

参考

• ES6 Generator 函数
• Generator详解
• Promise ，async/await 基本用法