generator & async

最新推荐文章于 2023-02-11 09:27:21 发布

茶餘

最新推荐文章于 2023-02-11 09:27:21 发布

阅读量113

点赞数

分类专栏：前端 ES6 文章标签： generator

本文链接：https://blog.csdn.net/denglan_1991/article/details/119876266

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

ES6

2 篇文章 0 订阅

订阅专栏

这篇博客探讨了JavaScript中的生成器（generator）及其如何作为语法糖简化异步编程。通过示例展示了如何使用generator处理中断执行并利用yield关键字等待结果。同时，介绍了asyncFun函数，它自动迭代generator并处理异步操作，例如调用longTimeFn函数，无需手动调用next。

摘要由CSDN通过智能技术生成

generator 是一种语法糖每个函数需要用 ‘*’ 来标识 (生成器)

// 生成器的这种方式 可以中断函数的执行  只有主动触发的时候才会继续执行下去
// generator 专有关键字  yield 等待结果
function* generator () {
	const list = [1, 2, 3]
	for (let i of list) {
		yield i
	}
}

let g = generator()
console.log(g.next())  // {value: 1, done: false}
console.log(g.next())  // {value: 2, done: false}
console.log(g.next())  // {value: 3, done: false}
console.log(g.next())  // {value: undefined, done: true}
// 所有的输出都结束后 done 为 true

async

function longTimeFn(time) {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve(time)
		}, time)
	})
}

// 问：传入一个 generator 不手动执行next 希望传入 generator 后 调用 函数 asyncFun  直接一次性输出
function asyncFun (generator) {
	const iterator = generator()
	const next = (data) => {
		const {
			value,
			done
		} = iterator.next(data)
		
		if (done) {
			return
		}

		value.then(data => {
			next(data)
		})
	}
	next()
}

asyncFun(function* () {
	let data = yield longTimeFn(1000)
	console.log(data)
	data = yield longTimeFn(2000)
	console.log(data)
	return data
})