async和await的使用

一. 什么是async

开发中我们最常用的Promise有一个语法糖，就是async，翻译成中文是异步；它是一个修饰符，作用是将函数标记为异步函数，同时这个函数的返回值变成promise。

    async function foo() {
      return ["abc", "cba", "nba"]
    }

    foo2().then(res => {
      console.log("res:", res)
    })

二. 什么是await

await翻译成中文是等待，必须放在async修饰的函数中使用；await修饰的如果是promise对象，那么可以获取到promise中返回的内容（resolve、reject函数），且获取到值才会继续执行该函数的代码；如果修饰的不是promise，那么就会将值作为await表达式的结果，所以最常用的才是修饰promise函数。

    function foo(t){
      setTimeout(function(){
          console.log(t);
      },t)
    }
    async function foo1(){
        let a = await foo(1000);
        let b = await log(3000);
        let c = log(2000);
        console.log(a);
        console.log(1)
    }
    foo1(); 
// 输出结果为：undefined、1、1000、2000、3000
// 解析：因为foo函数不是Promise函数，所以await只会将它作为一个返回值，不会阻塞后面的代码执行，所以刚开始的a是undefined，加不加await对这个函数的执行没有什么影响，三个定时器依旧按照等待时间长短先后执行。 

    function bar() {
      console.log("bar function")
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(123)
        }, 1000)
      })
    }

    async function foo() {
      console.log("-------")
      // await后续返回一个Promise, 那么会等待Promise有结果之后, 才会继续执行后续的代码
      const res1 = await bar()
      console.log("await后面的代码1:", res1)
      const res2 = await bar()
      console.log("await后面的代码2:", res2)
      console.log("+++++++")
    }


    function foo1(){
      return new Promise((resolve,reject)=> {
        console.log(123321);
        resolve('abc')
      })
    }
    foo()
    foo1().then(res=>console.log(res))
    console.log(123);

// 输出结果：----、bar function、123321、123、abc、await后面的代码1:123、、bar function、await后面的代码2:123、++++++
// 解析：await修饰的Promise函数，所以在输出完-----后，遇到await就会去先执行Promise，输出bar function，代码被阻塞,输出foo1以及后面的代码，当后面代码执行完，开始执行async函数内代码

三. 常规结合起来使用方法

一般用于网络请求，不用再then回调，写法会更加美观

    function requestData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('网络请求结果')
        }, 2000);
      })
    }

    async function getData() {
      const res = await requestData()
      console.log(res1)
    }

    getData()

特别注意

注意注意，async/await需要着重提一下，众所周知，async返回一个promise,而await声明的函数执行完毕之后，会产生一个微服务，但是await执行完之后直接跳出async，执行其他代码，执行完再回来，把后面的放入微服务队列，也就是一个阻塞await后面代码的过程。新版chorem其实是违规的优化了await，如果await后面跟的不是异步，那么会在遇到await之后直接把后面的代码放入微服务队列顶，这样执行完其他代码会先执行它再执行其他微任务（如上）；而异步情况就不会直接放入队列，而是最后放。

两个题，注意await后面代码执行时机：

            async function async1(){
                console.log('async1 start')
                await async2()
                console.log('async1 end')
            }
            async function async2(){
                console.log('async2 end')
            }
            async1()
            setTimeout(function(){
                console.log('setTimeout')
            },0)
            new Promise(resolve=>{
                console.log('Promise')
                resolve()
            }).then(()=>{
                console.log('promise1')
            })
            .then(()=>{
                console.log('promise2')
            })

			console.log('script start')
            async function async1() {
                await async2()
                console.log('async1 end')
            }
            async function async2() {
                console.log('async2 end')
                return Promise.resolve().then(()=>{
                    console.log('async2 end1')
                })
            }
            async1()
            setTimeout(function() {
                console.log('setTimeout')
            }, 0)
            new Promise(resolve => {
                console.log('Promise')
                resolve()
            })
            .then(function() {
                console.log('promise1')
            })
            .then(function() {
                console.log('promise2')
            })
            console.log('script end')