关于Generator，async 和 await的介绍

在本篇文章中我们主要围绕下面几个问题来介绍async 和await

🍰Generator的作用，async 及 await 的特点，它们的优点和缺点分别是什么？await 原理是什么？

📅我的感受是我们先来了解Generator，在去思考async 及 await 的问题这样更有利一点

Generator

🎆Generator是一种特殊的函数，它可以暂停和恢复其执行。也就是说该函数可以"中断"并在稍后恢复其执行状态，而不是从头开始执行。这使得生成器非常适用于处理大型数据流或异步操作，因为它可以有效地管理内存和资源。

文字太过于难理解，直接上实例：

使用Generator的时候我们需要可以通过 yield 和 next() 的使用来达到效果。

javascript 复制代码

function *foo(x) {
let y = 2 * (yield (x + 1))
let z = yield (y / 3)
return (x + y + z)
}
let it = foo(5)
console.log(it.next()) // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

🚀yield 和 **next()**的介绍：

🔰yield 关键字用于生成值并挂起生成器的执行。

🔰 next() 方法用于从生成器获取下一个值。每次调用 next()

时，生成器会从上次暂停的地方继续执行，直到遇到下一个 yield 或者执行结束。

认识了这两个知识点后我们在来读懂上面这段代码吧，

分析：

javascript 复制代码

function *foo(x) {
  let y = 2 * (yield (x + 1)); // 第一次 yield
  let z = yield (y / 3); // 第二次 yield
  return (x + y + z); // 返回最终结果
}

1️⃣第一次 yield：

🔰 (x + 1) 计算出 x 加上 1 的值。

🔰 yield (x + 1) 暂停函数执行，并返回 x + 1 的值作为 yield 的值。

接收值 ：

当 next() 方法被调用时，传递给 next() 方法的值会被赋给 yield 表达式的值。这里 y 的计算依赖于 yield (x + 1) 接收到的值。

2️⃣第二次 yield:

🔰 y / 3 计算出 y 除以 3 的值。

🔰 yield (y / 3) 再次暂停函数执行，并返回 y / 3 的值作为 yield 的值。

再次接收值:

当 next() 方法再次被调用时，传递给 next() 方法的值会被赋给 z。

返回值 :

最终返回 x + y + z 的计算结果。

调用生成器函数

javascript 复制代码

let it = foo(5);

初始化生成器 it，传入参数 5。
执行 next() 方法
1️⃣第一次 next()

javascript 复制代码

console.log(it.next()); // => {value: 6, done: false}

🔰 it.next() 调用生成器的 next() 方法。

🔰由于没有传递任何值到 yield 表达式，默认情况下 yield 接收到的值是 undefined。

🔰 x + 1 的值为 5 + 1 = 6。

🔰 yield 返回 {value: 6, done: false}，表示生成器还没有完成执行。

2️⃣ 第二次 next()

javascript 复制代码

console.log(it.next(12)); // => {value: 8, done: false}

🔰 it.next(12) 调用 next() 并传递值 12。

🔰12 被赋值给 yield 表达式的值，因此 y 的计算为 2 * 12 = 24

🔰y / 3 的值为 24 / 3 = 8

🔰 yield 返回 {value: 8, done: false}，表示生成器还没有完成执行。

3️⃣ 第三次 next()

javascript 复制代码

console.log(it.next(13)); // => {value: 42, done: true}

🔰 it.next(13) 调用 next() 并传递值 13。

🔰 13 被赋值给 z。

🔰 计算 x + y + z 的值为 5 + 24 + 13 = 42。

🔰 yield 返回 {value: 42, done: true}，表示生成器已经完成执行。

上面就是关于Generator的基本使用以及执行过程。

🚤 async 及 await

🚎async 和 await 是 JavaScript 中用于处理异步操作的关键字，它们使得异步代码看起来更像同步代码，提高了可读性和可维护性。

async 函数

🌌async 关键字用于声明一个函数为异步函数。这样的函数会返回一个 Promise 对象。即使函数体内部没有任何异步操作，async 函数也会返回一个解析为 undefined 的 Promise。

await 表达式

🌌await 关键字只能出现在 async 函数内部，用于等待一个 Promise 对象的结果。当 await 前面的表达式返回一个 Promise 时，await 会阻塞 async 函数的执行，直到 Promise 解析或拒绝。如果 await 前面的表达式返回的是非 Promise 对象，则会立即返回该值。

特点

🔰简化异步编程：使异步代码更加接近同步代码的风格。

🔰自动管理 Promise：async 函数总是返回一个 Promise。

🔰 错误处理：利用 try...catch 处理异步操作中的错误。

🔰非阻塞性：在等待异步操作期间，JavaScript 运行环境可以执行其他任务。

🔰链式调用：支持多个异步操作之间的顺序执行。

🔰返回值和错误处理：明确地处理异步函数的返回值和可能的错误。

原理

🔮一个函数如果加上 async ，那么该函数就会返回一个 Promise

javascript 复制代码

async function test() {
	return "3"
}
	console.log(test()) // -> Promise {<resolved>: "3"}

🔮async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用

javascript 复制代码

async function demo1() {
	let a = await sleep()
}

🔮async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，并且能够为我们解决回调地狱问题。

javascript 复制代码

async function demo() {
	// 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
	// 如果有依赖性的话，其实就是解决回调地狱的例子了
	await fetch(url)
	await fetch(url1)
	await fetch(url2)
}

javascript 复制代码

let a = 0
let b = async () => {
	a = a + await 10
	console.log('2', a) // ------> '2' 10
}
b()
a++
console.log('1', a) // ------> '1' 1

解析上面的代码：

🔰函数 b 先执行，在执行到 await 10 之前变量 a的值还是 0，因为 await 的内部实现了Generator函数，Generator 因为会限制函数执行，所以会保留堆栈内的东西，所以 a = 0 就被保存了下来；

🔰 因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成Promise.reslove(返回值)，然后会去执行函数外的同步代码。

🔰同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10。

上述解释中提到了 await 内部实现了 Generator ，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 Generator 。

今天的分享就到这里啦，感谢大家的阅览,小江会一直与大家一起努力，文章中如有不足之处，你的支持是我前进的最大动力，请多多指教，感谢支持，持续更新中 ......