点击上方“筑梦前端”欢迎订阅
ES7 引入的 async/await
在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces
的方式,而不会阻塞主线程。然而,它们也存在一些坑及问题。在本文中,将从不同的角度探讨 async/await
,并演示如何正确有效地使用这对兄弟。
前置知识
async 作用是什么
从 MDN 可以看出:
async
函数返回的是一个 Promise 对象。async 函数(包含函数语句、函数表达式、Lambda表达式)会返回一个 Promise 对象,如果在函数中 return
一个直接量,async 会把这个直接量通过 Promise.resolve()
封装成 Promise 对象。
如果 async 函数没有返回值, 它会返回 Promise.resolve(undefined)
。
await 作用是什么
从 MDN 了解到:
await 等待的是一个表达式,这个表达式的计算结果是 Promise 对象或者其它值(换句话说,await 可以等任意表达式的结果)。
如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞,它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。
async/await 的优点
async/await
带给我们的最重要的好处是同步编程风格。
让我们看一个例子:
很明显,async/await
版本比 promise