什麼是async

async的意思是“非同步”,顧名思義就是有關非同步操作的關鍵字,async 是 ES7 才有的,與我們之前說的Promise、Generator有很大的關聯。

使用語法:

async function name(param){

param //傳遞給函式的引數名稱

statements //函式體

}

name().then(function(res){

res//非同步操作返回的結果

})

async 函式返回一個Promise物件,可以使用then方法添加回調函式。具體例項如下:

async function show(){
return {a:12,b:15}
}
console.log(show())//Promise {<fulfilled>: {…}}
show().then(res=>{
console.log("res",res)
})

什麼是await

await關鍵字存在async函式表示式中,用於等待Promise物件,暫停執行,等到非同步操作完成後,恢復async函式的執行並返回解析值。如果把await放在asnyc函式體外,會報語法錯誤。

使用語法:

asnyc function name(){

returnValue = await expression;

}

expression 是一個Promise物件或一個需要等待的值,針對所跟不同表示式,有兩種處理方式:

對於Promise物件,await會阻塞主函式執行,等待Promise物件執行resolve之後,resolve返回值作為await表示式運算結果,然後繼續向下執行。

對於非Promise物件,可以是字串、布林值、數值以及普通函式等。await直接返回對應的值,而不是等待其執行結果。

await等待Promise物件例項如下:

async function test1(){
console.log("執行")
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("延遲3秒之後返回成功")
resolve({a:'1'})
},3000)
})
}
async function test2(){
let x = await test1()
console.log("x",x)//{a: "1"}
return x
}
test2().then(function(res){
console.log("res",res)//{a: "1"}
})

await 跟 普通函式 例項如下:

function test3(){
console.log("普通函式")
}
async function test4(){
await test3()
console.log("直接執行")
}
test4()

捕獲異常

上述的await後跟Promise物件,我們知道Promise有兩種狀態,resolved() 和 rejected() ,如果Promise物件變為rejected,會如何處理?

function testAwait(){
return Promise.reject("error");
}
async function test1(){
await testAwait();
console.log("test1");//沒有列印
}
test1().then(v=>{
console.log(v);
}).catch(e=>{
console.log(e);//"error"
})

從上例項執行結果發現,返回的reject狀態被外層的catch捕獲,然後終止了後面的執行。但是在有些情況下,即使出錯了我們還是繼續執行,而不是中斷,此時我們藉助try...catch捕獲內部異常。

function test1(){
return new Promise((resolve,reject)=>{
reject("error")
})
}
async function test2(){
try{
await test1()
}catch(e){
console.log("報錯",e)
}
}
test2().then((res)=>{
console.log("執行成功",res) // 列印:執行成功undefined
}).catch(err=>{
console.log('err',err)
})

Generator與async對比:

  • async利用await阻塞原理,代替了Generator的 yield 。
  • async 相比Generator 不需要 run 流程函式,完美地實現了非同步流程。

從 Promise 到 Generator , 再到 async ,對於非同步程式設計的解決方案越來越完美,這就是ES6不斷髮展的魅力所在。