async及await的特点,它们的优点和缺点分别是什么?await原
理是什么?await和async使用方法
⼀个函数如果加上async,那么该函数就会返回⼀个Promise
async function test() {
return "1"
}
console.log(test()) // -> Promise {<resolved>: "1"}
async就是将函数返回值使⽤solve()包裹了下,和then中处理返回值⼀样,并且await只能配套async使⽤
async function test() {
let value = await sleep()
}
async和await可以说是异步终极解决⽅案了,相⽐直接使⽤Promise来说,优势在于处理then的调⽤链,能够更清晰准确的写出代码,毕竟写⼀⼤堆then也很恶⼼,并且也能优雅地解决回调地狱问题。当然也存在⼀些缺点,因为await将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使⽤了await会导致性能上的降低。
async function test() {
// 以下代码没有依赖性的话,完全可以使⽤ Promise.all 的⽅式
// 如果有依赖性的话,其实就是解决回调地狱的例⼦了
await fetch(url)
await fetch(url1)
await fetch(url2)
}
下⾯来看⼀个使⽤await的例⼦:
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的话,就会包装成slove(返回值),然后会去执⾏函数外的同步代码
同步代码执⾏完毕后开始执⾏异步代码,将保存下来的值拿出来使⽤,这时候a = 0 + 10
上述解释中提到了await内部实现了generator,其实await就是generator加上Promise的语法糖,且内部实现了⾃动执⾏generator。如果你熟悉 co 的话,其实⾃⼰就可以实现这样的语法糖。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论