美文网首页
10.5 async 及 await

10.5 async 及 await

作者: 柠檬与断章 | 来源:发表于2019-11-18 15:38 被阅读0次

10.5 async 及 await
问题一:async 及 await 的特点,它们的优点和缺点分别是什么?await 原理是什么?

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

async function test() {
return "1"
}
console.log(test()) // -> Promise {<resolved>: "1"}
async就是将函数返回值使用Promise.resolve()包裹了下,和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的话,就会包装成Promise.reslove(返回值),然后会去执行函数外的同步代码
同步代码执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候a = 0 + 10
上述解释中提到了await内部实现了generator,其实await就是generator加上Promise的语法糖,且内部实现了自动执行generator。如果你熟悉 co 的话,其实自己就可以实现这样的语法糖。

相关文章

  • 10.5 async 及 await

    10.5 async 及 await问题一:async 及 await 的特点,它们的优点和缺点分别是什么?awa...

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • nodejs async 使用简介

    async await node async 使用

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

  • async/await

    async/await async/await 是Generator的语法糖。 Generator 通过将Gene...

网友评论

      本文标题:10.5 async 及 await

      本文链接:https://www.haomeiwen.com/subject/fryfictx.html