• async、await是消灭异步的终极办法
  • 和promise相辅相成
  • 执行async函数，返回的是Promise对象
  • await相当于Promise的then
  • try…catch可以在async中捕获异常，相当于promise的catch

    async函数返回的是Promise对象

    1. async function fn(){
    2. // 相当于return Promise.resolve(100)
    3.   return 100
    4. }
    5. const res = fn()
    6. console.log(res) // Promise {<fulfilled>: 100}
    7. res.then(data=>{
    8. console.log("data",data)
    9. })

    await相当于Promise的then

    1. async function fn(){
    2.   return 100
    3. };
    4. (async function(){
    5.   const res = await fn()
    6. console.log(res) //100
    7. })()
    1. (async function(){
    2.   const p1 = Promise.resolve(100)
    3. const a = await p1  //await相当于promise的then
    4. console.log('a', a) // a 100
    5. })()
    1. (async function(){
    2.   const data1 = await 200  //await Promise.resolve(200)
    3.   console.log('data1', data1) // data1 100
    4. })()

    示例：

    1. async function foo(){
    2. console.log(1)
    3. let a = await 100;
    4. console.log(a);
    5. console.log(2)
    6. }
    7. console.log("o")
    8. foo();
    9. console.log(3)
    打印结果：o 1 3 100 2image.png
    结果流程图分析async/await的执行流程
    首先执行console.log(“o”),打印o。然后执行foo函数，由于foo函数被async标记，所以进入该函数时，js引擎会保存当前调用栈信息，然后执行foo函数中的console.log(1)。
    遇到了foo函数内的await 100，此时进入分析重点。在执行await 100语句时，js引擎默认创建了Promise对象，代码如下
    1. let _promise = new Promise((resolve,reject){
    2. resolve(100);                           
    3. })
    创建_promise对象过程中，可以看到内部调用了resolve函数，js引擎会将该任务交给微任务队列。然后js引擎会暂停当前协程执行，将主线程的控制权转交给父协程，同时将_promise对象返回给父协程。
    接着继续执行父协程的任务，即执行console.log(3)。这时父协程任务执行结束，在结束之前进入到微任务检查点，开始执行微任务队列。微任务队列有resolve(100)的任务等待执行，执行到这里就触发_promise.then中的回调函数
    1. _promise.then(value=>{
    2. // 回调函数被激活后
    3. // 将主线程控制权交给foo协程，并将value值传给foo协程
    4. })
    foo协程激活后，会把value赋值给变量a，然后foo协程继续执行后续代码，执行完成将控制权交还给父协程。

    try…catch捕获错误

    1. (async function fn(){
    2.   const p1 = Promise.reject('async err') // reject在async中必须使用try..catch才能捕获到
    3. try{
    4.     const res = await p1
    5.   console.log(res)
    6. }catch(err){
    7.     console.error(err)
    8. }
    9. })()

    面试题

    async的题目

    ```javascript async function async1(){ console.log(‘async1 start’) //2 await async2() //之后的代码是异步回调内容 console.log(‘async1 start’) //5 }

async function async2(){ console.log(‘async2’) //3 }

console.log(‘script start’) // 1 async1() console.log(‘script end’) //4

  1. <a name="cCney"></a>
  2. #### setTimeout、promise、async结合的题目
  3. ```javascript
  4. async function async1() {
  5.     console.log('async1 start') //2
  6.     await async2() //微任务  
  7.     console.log('async1 end') //6
  8. }
  9. async function async2() {
  10.     console.log('async2') //3
  11. }
  13. console.log('script start') //1
  15. setTimeout(function(){ //宏任务
  16.     console.log('setTimeout')  //8
  17. },0)
  19. async1()
  21. new Promise(function(resolve){
  22.     console.log('promise1') //4
  23.     resolve() //微任务
  24. }).then(function(){
  25.     console.log('promise2')  // 7
  26. })
  27. console.log('script end') //5
  1. 先同步代码执行，执行完毕，【event loop的call stack调用栈清空】
  2. 执行微任务队列中的任务microTask
  3. 有可能触发DOM渲染更新
  4. 执行宏任务macroTask