生成器Generator与async/await

作用:提供异步编程方案

语法

function* gen(){
	yield 'hello'; // yield表达式是暂停执行的标记 next函数则可以恢复执行
	yield 'world';
	return 'baibai'
}

const g = gen();
g.next() // {value: 'hello', done: false}
g.next() // {value: 'world', done: false}
g.next() // {value: 'baibai', done: true}

yield表达式

next的运行逻辑

• 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
• 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
• 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
• 如果该函数没有return语句，则返回的对象的value属性值为undefined。

function* gen(){
	const res1 = yield 1; 
	console.log(res1) //返回值2
	const res2 = yield 2
	console.log(res2) //返回值3
	return 3
}
const g = gen()
g.next('返回值1')//{value: 1, done: false}
g.next('返回值2')//{value: 2, done: false}
g.next('返回值3')//{value: 3, done: true}

Generator与Promise一起使用

const p1 = new Promise((resolve, reject)=>{
	resolve('p1成功了')
})
const p2 = new Promise((resolve, reject)=>{
	resolve('p2成功了')
})
const p3 = new Promise((resolve, reject)=>{
	resolve('p3成功了')
})
function* getResult(){
	yield p1 // 返回一个promise
	yield p2
	yield p3
	return 1
}
const g = getResult()
g.next().value.then(data1=>{
	if(data1) g.next().value.then(data2=>{
		if(data2) g.next().value.then(data3=>{
			console.log(data1, data2,,data3) // p1成功了 p2成功了 p3成功了
		})
	})
})

自动运行生成器

  		function run (gen) {
            const g = gen();

            function next (data) {
                const result = g.next(data);
                if (result.done) return result.value;
                result.value.then(function (data) {
                    console.log(data);
                    next(data);
                });
            }

            next();
        }
        run(getResult)

async/await语法糖

// 将function* 改成async 将yield换成await
async function getResult(){
	const res = await p1
}