es8 async和await

async

        async function text() {
            console.log("aaaa")
        }
        let res = text()
        console.log(res)

先简单写一个async

这里看到async函数返回了一个Promise对象，而且在没有返回值的情况下，Promise的状态是fulfilled。

        async function text() {
            // console.log("aaaa")
            return new Promise((resolve,reject) => {
                // resolve("success111")
                reject("err222")
            })
        }
        let res = text()
        console.log(res)
        res.then(res =>{
            console.log("success",res) 
        }).catch(err => {
            console.log("err",err) //err err222
        })

根据上面的代码，发现根据async函数返回的Promise对象返回的是resolve还是reject执行then或者catch。

await

先写一个没什么意义的await来验证一下await可以接非Promise对象

        async function text() {
          //await 后面可以接 非Promise对象 或者 Promise对象
          let res = await "starry"
          console.log(res) // starry
        }

        text()

接着来看await配合async的神奇大法

        function ajax() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("ajax-success")
                    resolve("data-starry")
                },1000)
            })
        }

        async function text() {
            //await 后面可以接 非Promise对象 或者 Promise对象
            let res =  await ajax()
            console.log(res) // 等一秒钟打印 data-starry
        }
        text()

在时间过了一秒之后打印ajax-success和data-starry

await十分深情，他一定要等到一个结果才会往下执行，这样就把异步执行写出了同步的效果。可以说是非常完美了，这里你一定想到了yield，没错async和await就是Generator生成器的语法糖。这里我们去掉await来对比一下

        function ajax() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("ajax-success")
                    resolve("data-starry")
                },1000)
            })
        }

        async function text() {
            //await 后面可以接 非Promise对象 或者 Promise对象
            let res =  ajax()
            console.log(res) // 等一秒钟打印 data-starry
        }
        text()

先返回了一个pending状态的Promise对象，过了一秒之后打印了ajax-success。

在实际开发中，async和await用来解决回调地狱，让异步执行看起来像同步一样，下面是一个简单的例子，我们发生ajax1后需要等待ajax1的结果res1，根据res1发生ajax2，最后将res2的数据返回用于渲染页面。

        function ajax1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("data1-starry")
                },1000)
            })
        }

        function ajax2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("data2-starry")
                },1000)
            })
        }

        async function text() {
            let res1 =  await ajax1()
            console.log(res1) 

            let res2 = await ajax2(res1)
            console.log(res2)

            return res2
        }
        text().then(res => {
            console.log(res,"渲染页面")
        }).catch(err => {
            console.log("err",err)
        })

这里不管是ajax1还是ajax2中只要Promise等待是一个reject的结果，都会马上跳出，执行catch。自然而然还有另外一种写法try,catch写法

        function ajax1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("data1-starry")
                }, 1000)
            })
        }

        function ajax2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("data2-starry")
                }, 1000)
            })
        }

        async function text() {
            try {
                let res1 = await ajax1()
                console.log(res1)

                let res2 = await ajax2(res1)
                console.log(res2)
                console.log("渲染页面")
            } catch(err) {
                console.log("err",err)
            }
        }
        text()