【JavaScript】--- ES6/ES7/ES8

一、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