一个函数如果加上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 的话,其实自己就可以实现这样的语法糖。
