es6的Generator函数和Async函数

最新推荐文章于 2021-09-03 07:54:33 发布

原创最新推荐文章于 2021-09-03 07:54:33 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Generator函数和Async函数

es6 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨Generator函数的作用，包括生成迭代器和同步异步操作。通过具体示例讲解了Generator函数的声明、调用过程及yield表达式的使用。同时，介绍了如何利用Generator函数调用异步函数，实现异步操作的同步化，并展示了其在处理Promise时的优势。

Generator函数
作用：
1）迭代器的生成函数
2）将异步操作同步化

promise封装了异步操作

$.get("/customer/findAll")
.then((response)=>{
	//通过回调函数来获取异步操作的结果
})

（1）声明（语法）

function* foo(){
	let a = "hello"
	yield a;
	yield "world";
	return "end"
}

（2）调用

let iterator = foo();   //执行generator函数，获取迭代器对象
iterator.next()		// {value:"hello",done:false}
iterator.next()		// {value:"world",done:false}
iterator.next()		// {value:"end",done:true}

利用迭代器的next()获取yeild表达式的值

（3）this
Generator与普通函数中的this的获取是一致的

（4）yield表达式的返回值
默认没有返回值
iterator.next(参数) 当前这个参数为上一个yield表达式的返回值

（5）作用
1）Generator函数可以用于调用异步函数，将异步操作同步化

let customers = $.get("/customer/findAll");
let customerId = customers[0].id
let address = $.get("/address/findByCustomerId?id="+Id)

2）迭代器
将obj转换为可迭代器的对象
obj[Symbol.iterator] = “”[Symbol.iterator]
Generator的返回值就是迭代器对象
let arr = [1,2,3];
arr.values() 迭代器对象
arr[Symbol.iterator] 生成迭代器对象的函数

Async函数
是Generator函数的语法糖

async function foo(){
		let customers = await $.get(url)
		let orders = await $.get(url)
	}
let promise = foo()

await
await表达式后一般为promise，await会等待promise状态改变resolved，然后将请求结果返回，最后继续向下运行

通过id删除顾客信息
function deleteById(id){
	$.get(deleteById).then(()=>{
		alert("");
		$.get(findAll).then(()=>{
			重新渲染
		})
	})
}

async版本

async function deleteById(id){
	let result = await(deleteById,id);
	alert(result.message);
	await(findAll)
}
deleteById(1)