1.async函数

说明：

通常就是Generator函数的语法糖，async函数自带执行器，也就是说,async函数的执行，与普通函数使用一样。
语义化，加上async函数表示时异步操作，await表示需要等待结果。
通用性，async函数的await命令后面，可以是Promise对象和原始类型的值。
返回值时Promise，async函数的返回值是Promise对象。

2.用法

  async function fun(name){
            // 获取用户的名字
            const userName=fun1(name)
            //获取密码
            const passWord=fun2(password)
            return userName
        }
        fun("good").then(result=>{
            console.log(result);
        })

注意：上面是一个获取用户名的函数，函数前的async关键字，表示该内部有个异步操作。当用该函数的时候会返回一个promise对象。

2.1例子

   async function timeout(time){
           await new Promise(resolve=>{
            setTimeout(() => {
            resolve()
        }, time);
           }) 
        }
        async function asyncOutput(value,time){
            await timeout(time)
            await console.log(value);
        }
        asyncOutput("hello world",2000)

注意：当两秒过后，输出hello world。

3.语法

说明：async函数的语法规则总体简单，但是难以发现错误。返回Promise对象，async函数内部return语句返回的值，会成为then方法回到函数的参数。

  async function fun1(){
            return 'study repeatly'
        };
        fun1().then(result=>{
           console.log(result); //study repeatly
        })
       async function fun2(){
           throw new Error("出错了")
       }
       fun2().then(result=>{
        console.log(result);
       }).catch(error=>{
        console.log(error); //出错了
       })

注意：总结：函数内部return命令返回的值，会被then方法回调函数收到，async函数内部抛出错误，会导致返回的Promise对象变成reject状态。错误将会被catch方法回调函数接收到。

4. Promise对象的状态变化

说明：async函数返回的Promise对象，必须等到内部所有await命令后面的Promise对象执行后，才会发生改变，除非遇到return语句或者抛出错误。只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

5.await命令

说明：正常情况下，await命令后面是一个Promise对象，返回该对象的结果。如果不是就直接返回对应的值。

 async function fun3(){
       return await 132  //等同于return 132
    }
    fun3().then(result=>{
        console.log(result);  //132
    })

5.1例子

说明：任何一个await语句后面的Promise对象变成了reject状态，那么整个async函数都会中断执行。

 async function fun4(){
   await Promise.reject("发生错误")
        await 123
    }
    fun4().then(result=>{
        console.log(result); //发生错误
    })

5.2例子

说明：如果前一个异步操作失败，也不要中断后面的异步操作。

 async function fun5(){
        try {
            await Promise.reject("发生错误")
        } catch (error) {
            console.log(error);
        }
       return await Promise.resolve("successful") //控制权交还给异步函数
    }
    fun5().then(resolve=>{
        console.log(resolve); //successful
    }).catch(error=>{
        console.log(error);
    })

5.3例子

说明： await命令后面的Promise对象，运行结果可能是rejected(会抛出一个错误)，所以最好把await命令放在try...catch代码块中。

 async function fun6(){
        try{
            await getfun();
        }catch(error){
            console.log(error);
        }
    }
    // 第二种写法
    async function fun7(){
        await getfun1()
        .catch(error=>{
            console.log(error);
        })
    }

6.async函数实现原理

说明： async函数的实现原理，就是将Generator函数和自动执行器，包装在一个函数里面。

7.应用

说明：async实现部署了一系列动画，动画前一个结束才可以开始后一个动画，如果有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。

   async function continueAnimations(element,animations){
        let ret=null
        try{
            for(let action of animations){
                ret=await anim(action)
            }
        }catch(error){
            console.log(error);
        }
        return ret
      }

8.顶层await

说明：await命令可以在模块的顶层使用await命令。

 const data=await fetch("url")

注意：主要目的是使用await解决模块异步加载的问题。

ES6中async函数