什麼是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不斷髮展的魅力所在。