async 和 await

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

  1. async function test() {
  2.   return "1";
  3. }
  4. console.log(test()); // -> Promise {<resolved>: "1"}

可以把 async 看成将函数返回值使用 Promise.resolve() 包裹了下。

await 只能在 async 函数中使用

  1. function sleep() {
  2.   return new Promise(resolve => {
  3.     setTimeout(() => {
  4.       console.log('finish')
  5.       resolve("sleep");
  6.     }, 2000);
  7.   });
  8. }
  9. async function test() {
  10.   let value = await sleep();
  11.   console.log("object");
  12. }
  13. test()

上面代码会先打印 finish 然后再打印 object 。因为 await 会等待 sleep 函数 resolve ，所以即使后面是同步代码，也不会先去执行同步代码再来执行异步代码。

async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。缺点在于滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。

下面来看一个使用 await 的代码。

  1. var a = 0
  2. var b = async () => {
  3.   a = a + await 10
  4.   console.log('2', a) // -> '2' 10
  5.   a = (await 10) + a
  6.   console.log('3', a) // -> '3' 20
  7. }
  8. b()
  9. a++
  10. console.log('1', a) // -> '1' 1

对于以上代码你可能会有疑惑，这里说明下原理

  • 首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为在 await 内部实现了 generators ，generators 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
  • 因为 await 是异步操作，遇到await就会立即返回一个pending状态的Promise对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 console.log('1', a)
  • 这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 10
  • 然后后面就是常规执行代码了