async await 和for of异步执行，同步输出

async是什么呢？大家都说他是异步请求的终极解决方案，这也证实了，async确实蛮吊的，下面我们看一下async的具体用法

async的基本用法

async函数有很明显的特征，就是函数前有async这个关键字，跟async陪套的是await，await在async函数里，async和await都返回一个promise的函数。

{
      function timeout(value,ms){
        return new Promise((resolve,reject)=>{
          setTimeout(()=>{
            resolve(value);
          },ms);
        });
      }

      async function asyncPrint(value,ms){
        const str=await timeout(value,ms);
        console.log(str);//hello world
        return str;
      };
      asyncPrint("hello world",2000).then(res=>{
        console.log(res);//hello world
      });
}

上面是个简单的async函数例子，在两秒之后，async函数里打印出来hello world，说明async里只要遇到await，就会先执行await后面的函数，一直执行完，才执行下面的语句。
await后面虽然跟着是promise函数，但是可以不用写then，可以直接得到返回值。
因为async函数返回的是promise，所以可以在async函数后面加then处理return出来的数据，这样更加清晰，代码更容易阅读，逻辑也清楚，这就是async的好处之一。

顶级 await

最外层的script标签属性必须得有type="module"，不然会报错，在script标签最外层的代码块下，不用写async(也没地方写)，就可以使用await，使用场景是可以同步加载资源初始化等

<script type="module">

  function getImg(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(1111)
      },2000)
    })
  }

  const data = await getImg()
  console.log(data) // 两秒之后输出：1111
</script>

async的错误处理

第一种情况单个await可以直接用try catch，不用then

function getImage(url){
    return new Promise((resolve,reject)=>{
        let img=new Image();
        img.src=url;
        img.onload=()=>{
            resolve("ok");
        };
        img.onerror=()=>{
            reject("err");
        };
        //错误的
        // setTimeout(()=>{
        //     show();
        // },0);
        //正确的
        show();
        console.log("执行");
    });
}

async function printImg(){
    try{
        const img=await getImage("http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg");
        return img;
    }catch(e){
        console.log(e);// show is not defined
    }
    console.log("async执行");//async执行
}
printImg();

注意地方

这里需要注意一点的就是发生错误的地方必须在promise的上下文中，不然try catch捕捉不到这个错误，代码还是会报错，无法继续执行下面的代码

第二种就是用promise的all方法，因为all方法也是要么全部成功，要么一个失败就全失败，所以这种方法跟第一种比缺点是一样的

function getImage(url){
    return new Promise((resolve,reject)=>{
        let img=new Image();
        img.src=url;
        img.onload=()=>{
            resolve("ok");
        };
        img.onerror=()=>{
            reject("err");
        };
        show();
        console.log("执行");
    });
}

async function sPrintImg2(){
    Promise.all([getImage("http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg"),getImage("http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg")]).then(res=>
      console.log(res);
    ).catch(e=>
      console.log(e);//show is not defined
    );
}

sPrintImg2();

第三种就是麻烦了，对每个await用try catch抱起来，但是这种可以避免第一种或者第二种的缺点

function getImage(url){
    return new Promise((resolve,reject)=>{
        let img=new Image();
        img.src=url;
        img.onload=()=>{
            resolve("ok");
        };
        img.onerror=()=>{
            reject("err");
        };
        show();
        console.log("执行");
    });
}

async function sPrintImg3(){
    try{
        await getImage("http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg");
    }catch(e){
        console.log(e);
    }

    try{
        await getImage("http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg");
    }catch(e){
        console.log(e);
    }
    console.log("第三种方法async执行");
}

sPrintImg3();

还有一个值得注意的是，await必须在async函数的上下文中的。

{
let timeout=()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("我是验证await必须放在上下文中");
        },100);
    });
}
//错误的
async function printTimeout(){
     setTimeout(()=>{
         const str=await timeout();
         return str;
     },0);//await is only valid in async function
}
//正确的
// async function printTimeout(){
//     const str=await timeout();
//     return str;
// }
printTimeout().then(res=>console.log(res));
}

如果await没有在async上下文中，就会报错，所以一定要注意这个地方

await和for of异步执行，同步输出结果

假如说有一个需求，需要按照顺序去请求并返回结果

function getResult(time){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      console.log(time)
      resolve(time)
    },time);
  })
}

async function action(){
  for await(let val of [getResult(3000),getResult(1000),getResult(2000)]){
    console.log(val);//三秒后一下依顺序全部输出出来3000、1000、2000
  }
}

action();

上面这样写，如果循环是promise实例，那么就会异步执行数组里的每个promise实例，但是for of里的代码是不执行的，得等到全部的promise的状态改变完了，才去执行，也就是异步执行，同步输出结果，可以满足需求

如果await是在for of代码块里，那么执行的就是同步了，不会异步执行

async function action(){
  for (let val of [3000,1000,2000]){
    let res=await getResult(val)
    console.log(res);//等待三秒后3000,再等待一秒后1000,再等待二秒后2000
  }
}

因为for of是迭代器，不是forEach\filter\map等循环函数，并且for of的await没有放到小括号的前面，而是放到了函数体里，所以会同步循环执行，等待第一个执行完，再循环执行第二个

如果是forEach里面放await呢，猜一下执行结果和顺序

[3000,1000,2000].forEach(async (val)=>{
  let res=await getResult(val)
  console.log(res)//等待一秒后1000,再等待一秒后2000,再等待一秒后3000
})

forEach里面是循环的一个匿名函数，所以会循环异步执行匿名函数，里面的await只会等待结果执行完，才会执行下面的代码

关于async await的就介绍这么多，希望对你有所帮助，如果想看更详细的资料，请狠狠的点击我

async await 和for of异步执行，同步输出