async小记

async

异步代码以同步方式执行

await兼容

如果await的不是promise,promise会有隐式的转换。

async function handler() {
    const data= await 123;
    //等同于 const data =await Promise.resolve(123)
    console.log(data);
 }

处理async错误

• try...catch

 async function handleErr() {
        try {
          const data= await someAsyncFn();
        } catch (err) {
          //异常处理；
          console.error(err);
        }
 }

多个await操作串行、并行

• await串行 await多个异步操作，会打破多个异步操作的并行，因为会等到第一个任务执行完成之后才会开始执行第二个任务。

 async function aa(){
       const promiseA= await fetch('./data/a.json')  //第一个
       const promiseB= await new Promise((resolve) => {
            console.log("111");
            setTimeout(() => {
                resolve(222);
            }, 1000);
        }) //第二个
       console.log("promiseA",promiseA);
       console.log("promiseB",promiseB); 
 }

• await并行 使用Promise.all组合起来再进行await,可以让多个await并行，提高效率。

 async function aa(){
       const promiseArr=[
            fetch('./data/a.json'),
            fetch('./data/b.json')
        ]
      // const promiseArr=arr.map((el)=>someAsyncFn(el))
      const [a,b]= await Promise.all(promiseArr)
      console.log("a",a,b);    
 }

for循环中使用await

在循环中执行异步操作，不能直接调用forEach或者map之类的方法。因为forEach会立即返回，它并不会暂停等到所有的异步操作都执行完毕；如果希望等待循环中的异步操作都一一完成后才继续执行，则使用传统的for循环。

• for循环中串行

//错误写法
 function forFn(){
        [1,2,3].forEach(async()=>{
            await someAsyncFn()
        })
 }
 
 //正确写法1
 async function forFn(){
        for(let i of [1,2,3]){
            console.log(i);
            await someAsyncFn()
        }
        console.log("end"); 
 }
 //正确写法2
  async function handleErr() {
        let arr=[1,2,4]
        const promises=arr.map((el)=>someAsyncFn(el))
        for(var promise of promises){
            await promise
        }
    }

• for循环中的异步并发执行

 async function awaitFn(){
        let promiseArr=[
            someAsyncFn(),
            someAsyncFn(),
            someAsyncFn()
        ]
        for await (let i of promiseArr){

        }
        
        console.log("end");
}