紫搜科技建站,职业培训网络平台,建设手表商城网站多少钱,制作器在本篇文章中我们主要围绕下面几个问题来介绍async 和await #x1f370;Generator的作用#xff0c;async 及 await 的特点#xff0c;它们的优点和缺点分别是什么#xff1f;await 原理是什么#xff1f; #x1f4c5;我的感受是我们先来了解Generator#xff0c;在去…在本篇文章中我们主要围绕下面几个问题来介绍async 和await Generator的作用async 及 await 的特点它们的优点和缺点分别是什么await 原理是什么 我的感受是我们先来了解Generator在去思考async 及 await 的问题这样更有利一点
Generator
Generator是一种特殊的函数它可以暂停和恢复其执行。也就是说该函数可以“中断”并在稍后恢复其执行状态而不是从头开始执行。这使得生成器非常适用于处理大型数据流或异步操作因为它可以有效地管理内存和资源。 文字太过于难理解直接上实例 使用Generator的时候我们需要可以通过 yield 和 next() 的使用来达到效果。
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 或者执行结束。 认识了这两个知识点后我们在来读懂上面这段代码吧 分析
function *foo(x) {let y 2 * (yield (x 1)); // 第一次 yieldlet z yield (y / 3); // 第二次 yieldreturn (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 的计算结果。
调用生成器函数
let it foo(5);初始化生成器 it传入参数 5。 执行 next() 方法 1️⃣第一次 next()
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()
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()
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 对象则会立即返回该值。
特点
简化异步编程使异步代码更加接近同步代码的风格。 自动管理 Promiseasync 函数总是返回一个 Promise。 错误处理利用 try…catch 处理异步操作中的错误。 非阻塞性在等待异步操作期间JavaScript 运行环境可以执行其他任务。 链式调用支持多个异步操作之间的顺序执行。 返回值和错误处理明确地处理异步函数的返回值和可能的错误。
原理
一个函数如果加上 async 那么该函数就会返回一个 Promise
async function test() {return 3
}console.log(test()) // - Promise {resolved: 3}async 就是将函数返回值使用 Promise.resolve() 包裹了下和 then 中处理返回值一样并且 await 只能配套 async 使用
async function demo1() {let a await sleep()
}async 和 await 相比直接使用 Promise 来说优势在于处理 then 的调用链能够更清晰准确的写出代码并且能够为我们解决回调地狱问题。
async function demo() {// 以下代码没有依赖性的话完全可以使用 Promise.all 的方式// 如果有依赖性的话其实就是解决回调地狱的例子了await fetch(url)await fetch(url1)await fetch(url2)
}let a 0
let b async () {a a await 10console.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 。
今天的分享就到这里啦感谢大家的阅览,小江会一直与大家一起努力文章中如有不足之处你的支持是我前进的最大动力请多多指教感谢支持持续更新中 ……
