es6异步处理方法之async函数

语法： async function name();

• demo

 async studyAsync(){ to do something };

作用：与Promise一样，使得异步操作变得更加方便，相比于Promise语法更加简洁

有返回值

async函数将返回一个promise对象，内部会调用Promise.resolve()将返回值转化成promise对象并返回resolve状态，因此获取async函数的返回结果的时候需要使用promise.then()来获取

• demo

async function studyAsync(key){
   if(key) {
    return key
   }else{
    return 'I am resolve'
   }
}

studyAsync().then(res => console.log(res) ) // 'I am resolve'
studyAsync(['hello','world']).then(res => console.log(res) ) // ['hello','world']

无返回值 作用与普通函数一致

抛出错误

async函数抛出错误时返回一个promise对象，内部会调用Promise.reject()将返回值转化成promise对象返回reject状态，因此获取async函数的返回结果的时候需要使用promise.catch()来获取

async function studyAsync(key){
   if(key) return key;
   throw new Error('出错了')
}

studyAsync().catch(res => console.log(res) ) // Error: 出错了
studyAsync(['hello','world']).then(res => console.log(res) ) // ['hello','world']

await关键字

语法: await+表达式。

await只能放在async函数体内。await关键字后面一般是一个 Promise 对象，返回该对象的异步操作结果。 也可以是原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）

• demo

async function studyAwait(){
    const value = await 'Hello World';
    console.log(value);
}

studyAwait();// 'Hello World'

async function studyAwaitClone(){
    const p = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            return resolve('setTimeout')
        },1000)
    })
    
    return await p
}

studyAwaitClone().then(res=>console.log(res));//1s后打印'setTimeOut'

作用：

async函数体内代码执行到await关键字处会停止往下执行，直到await后面的表达式异步操作完成返回结果后，再接着执行函数体内后面的语句

• demo

async function studyAwait(){
    const p = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('hello');
            resolve('success');
        },3000)
    })
    const p1 = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('world');
            resolve('ok');
        },2000)
    })
    console.log(p);
    console.log(p1);
    const value = 300;
    console.log(value);
}

studyAwait();

结果：3秒后打印'hello'，接着2秒后打印'world'，再打印'success'、'ok'，最后打印300

当await后面的表达式异步操作结果返回reject状态时，async函数会中断执行，并且会在catch方法中返回结果

• demo

async function studyAwait(){
    const p = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
          reject('fail');
        },1000)
    })
    <!-- 执行中断 -->
    const value = 300;
    console.log(value);
}

studyAwait().catch(error=>console.log(error));//'fail'

若不希望async函数会中断执行，可以在promise对象后面接着用catch()或者使用try{}catch{}

async function studyAwait(){
    const p = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('hello');
            reject('fail');
        },1000)
    }).catch(error=>console.log(error))
    console.log('world');
}

studyAwait();//先打印hello再打印fail最后打印world


async function studyAwaitClone(){
    try{
      const p = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('success');
        },1000)
      })
       const p1 = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('fail');
        },1000)
      })
      const p2 = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('fail2');
        },1000)
      })
    }catch(error){console.log(error)}
    console.log('hello world')
}

studyAwaitClone();//先打印'fail'再打印'hello world'

如果async函数体内多次使用await关键字，因为需要等待await后面的表达式返回异步操作结果才能进行下一个await(继发执行)，所以程序执行会比较耗时。如果需要缩短程序的执行时间，可以同时触发await(并发执行)

• 继发执行

function sleep(time){
    const timer = new Promise((resolve,reject)=>{
        setTimeout(resolve,time)
     })
    return timer
}

async function demoFunction(time){
    for(let i = 0;i < 5;i++){
        await sleep(time);
        console.log('hello world')
    }
}

demoFunction(2000);//每隔两秒才打印出hello world

• 并发执行

1. 写法一：使用promise.all()

async function demoFunction(){
      const p = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('success');
        },1000)
      })
       const p1 = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('success1');
        },1000)
      })
      const p2 = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('success2');
        },1000)
      })
      let res = await Promise.all([p,p1,p2]);
      console.log(res);
}

demoFunction();//['success','success1','success2']

2. 写法二：先把多个promise对象赋值给变量，然后再使用await

async function demoFunction(){
      const p = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('success');
            resolve('success');
        },3000)
      })
       const p1 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('success1');
            resolve('success1');
        },1000)
      })
      const p2 = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('success2');
            resolve('success2');
        },2000)
      })
      const p4 = await p;
      const p5 = await p1;
      const p6 = await p2;
      console.log('last')
}

demoFunction(); //先打印success1再打印success2再打印success最后打印last