【原生】---async与Await的介绍 ---ES6\7\8-----

 

 

一、async
　　async其实是ES7才有有的关键字，async的意思是异步，顾名思义是有关异步的操作

　　async用于声明一个函数是异步的。

　　通常情况下async、await都是跟随promise一起使用，因为async返回值都是一个promise对象，async适用于任何类型的函数上

 

二、基本使用
　　使用async其实很简单，只需要在函数前面加一个async即可，这个函数的返回值是一个promise

　　

//用来声明一个函数是异步的
async function fn(){
    return 123;
}

//返回值是一个promise
console.log(fn())
/*
Promise
    __proto__: Promise
    [[PromiseStatus]]: "resolved"
    [[PromiseValue]]: 123

*/

//可以通过.then拿到返回值
fn().then((data)=>{
    console.log(data);//123
})

 

 

三、await
　　await关键字不能够单独使用，必须在async中进行使用
　　await等待异步执行返回结果后才会执行下面的代码，其实await就是阻止主函数的运行

function fn(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
               console.log(1111);
               resolve()
        },2000)
    })
    
}


async function fn1(){
    await fn();
    setTimeout(()=>{
           console.log(2222);
    },1000)
}

fn1()

 

四、如何实现多个异步同步执行

　　

function fn(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
               console.log(1111);
               resolve()
        },3000)
    })
    
}


function fn1(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
               console.log(2222);
               resolve()
        },2000)
    })
}

function fn2(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
               console.log(3333);
               resolve()
        },1000)
    })
}

async function fn3(){
    await fn();
    await fn1();
    await fn2();
}

fn3()

 

五、总结

　　async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

　　因此如果需要实现多个异步同步执行必须每次await后都返回一个新的promise