JS-async 和 await

207 阅读2分钟

概述

async/await 是 promise 的语法糖,友情链接:Promise,每次我们使用 await, 解释器都创建一个 promise 对象,然后把剩下的 async 函数中的操作放到 then 回调函数中。也就是说,除了await后面紧跟着的相当于Promise内部的代码外,await后的代码都相当于Promise.then中的代码。await前的代码正常同步执行。

async () => {
  a = a + 1;
  await fn();
  console.log('2', a) ;}
  // =======相当于======> 
  a=a+1;
  new Promise(()=>{
     fn()
     }).then(()=>{
       console.log('2', a);
       })

async/await 相比直接使用Promise来说:

优势在于处理 then 的调用链,能够更清晰准确的写出代码。

缺点在于滥用 await可能会导致性能问题,因为await会阻塞代码,也许之后的异步代码并不依赖于前者,但仍然需要等待前者完成,导致代码失去了并发性。

非主要:1.在没有await的情况下执行async函数,它会立即执行,返回一个Promise对象,并且,绝不会阻塞后面的语句。2.在await内部实现了generators,generators会保留await之前堆栈中的东西

示例

var a = 0
var b = async () => {
  a = a + await 10
  console.log('2', a) // -> '2' 10
  a = (await 10) + a
  console.log('3', a) // -> '3' 20
}
b()
a++
console.log('1', a) // -> '1' 1
输出:1 1 2 10 3 20

对于以上代码你可能会有疑惑,这里可以先看下Eventloop的相关说明,说明下原理

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