JS之async与await（队列）

一、async与await

1：async函数

• async用来定义一个异步函数，这个函数的返回值为Promise对象
• 函数的结果由async函数执行后的返回值决定

2：await表达式

• await表达式，右侧一般为promise对象，但是也可以为其他值
• 假如为Promise对象的时候，其值为Promise的成功或失败的结果
• 假如为其他值的时候，那么其值为该表达式的结果

注意点：
01：await表达式需要放在async函数里面，但是async函数里面可以不含await表达式
02：如果await的Promise为失败时，这就需要使用try{}catch{}来捕获错误

二、队列

1：JS引擎执行任务的时候是单线程的，也就是说一条流水线下来执行
2：优先执行同步任务，异步任务放置在消息队列之中
3：消息队列分为两种，宏队列（宏任务），微队列（维任务）
4：微队列优先于宏队列执行，
即使两个宏队列里面，其中有一个微队列，那么就先执行宏列队后，把宏队列的微队列取出执行后，最后指向宏队列的下一个宏队列
注意点：宏队列（dom的回调函数，还有ajax，还有定时器函数） 微队列（promise回调函数，还有mutation回调函数）

  <script>
    setTimeout(() => { //会立即放入宏队列
      console.log("timeout callback1()");
      Promise.resolve(3).then( //会立即放入微队列
        value => {
          console.log('onfulfill3()', value);
        }
      )
    })
    setTimeout(() => { //会立即放入宏队列
      console.log("timeout callback2()");
      Promise.resolve(4).then( //会立即放入微队列
        value => {
          console.log('onfulfill4()', value);
        }
      )
    })

    Promise.resolve(1).then( //会立即放入微队列
      value => {
        console.log('onfulfill()', value);
        //Prpmise.resolve(1) ---成功的结果为1(返回的是一个promise对象），.then()再调用其结果，也就是成功的回调值为1
      }
    )
    Promise.resolve(2).then( //会立即放入微队列
      value => {
        console.log('onfulfill2()', value);
        //Prpmise.resolve(2) ---成功的结果为1(返回的是一个promise对象），.then()再调用其结果，也就是成功的回调值为2
      }
    )
    //执行结果为： 先执行微队列的，然后在执行宏队列，若是宏队列里面含有微队列，那么待外层的宏队列执行后，在取出微队列执行，之后继续向后面执行宏队列
    // onfulfill() 1 ，onfulfill2() 2 ，timeout callback1()，onfulfill3() 3，timeout callback2()，onfulfill4() 4
  </script>