先从字面意思理解一下 :
async:异步,用于申明一个 function 是异步的
await:async wait,用来等待一个异步方法执行完毕
规则:await只能在async中使用
而async到底起的什么作用呢?
写一个函数看一下输出:
ok,看起来,它只是将返回值封装成promise对象。
而官方文档也是这么介绍的:
async函数(包含函数语句、函数表达式、Lambda表达式)会返回一个 Promise 对象,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
前面说了await只能在async中使用,所以我们在async的外层并不能使用await获取其返回值,那么我们只好用then()链式处理这个promise对象。我们再打印一下看看。
如果莫得返回值呢?async会返回啥子呢?
ok。
我们还知道promise的特点是无等待,也就是说执行async函数时,如果莫得await,那么这个函数会立即执行,返回一个promise对象。也就是说离开了await,async就是一个返回promise对象的普通函数,并没用什么特别之处。所以关键还是在于await。
按照官方说法:await等待的是一个表达式,这个表达式的计算结果是Promise对象或者其它值。
!await 等的是什么,不是async函数,而是一个返回值。!!
await可以用来等待一个async函数的返回值, 但并不仅仅只能等待async返回的promise对象,它可以等任意表达式的结果。也就是说你就算在await后面跟普通函数也是可行的。比如:
重点来了,上面说了await在等什么,那么当她等来了她要等的之后呢?
有两种情况:
1. 如果等来的不是promise对象,await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完,再回到async内部,把这个非promise的东西,作为 await表达式的结果。
2. 如果等来了promise对象,await 会阻塞后面的code,先执行async外面的同步代码,同步代码执行完,再回到async内部,等到promise对象resolve,然后得到resolve的值,作为await表达式的运算结果。比如上面的代码图,我们知道asyncFunc的返回值显然是promise对象,然而打印出的val1却是promise对象的resole的值,就是这个原因。
大概就是这个样子,那么 async/await 的优势也就显而易见了:
优势在于处理then链。我们知道promise通过then链来解决回调地狱的问题,而 async/await 的存在又是为了进一步优化 promise 的then链。
我们上代码举例说明它是怎么优化的。
ok,先用promise的方式处理这三个step函数:
如果使用 async/await 来实现呢?
相较而言,async/await 的写法清晰了很多。然而这样还是体现的不够明显。我们改一下需求再看。
仍然是三个步骤,但每一个步骤都需要之前每个步骤的结果。
ok,我们来看一下如果用promise写会写成什么样:
surprise ? 由此可见,复杂的参数处理,是promise不可避免的弊端。看着这么多的参数传递感觉要疯了哈哈,别急,我们再试试用 async/await 来写:
没错,简洁至此,眼笑眉舒。