在ES6中支援Promise,解決了callback hell的問題,而在TypeScript中則支援async/await語法糖,可以更加簡化Promise的使用,提高程式碼的可讀性。而TypeScript中await的實作方式在本篇則不加詳述。
本範例則是透過上述的功能實現一個簡易的Sleep方法。
前情
在JavaScirpt中要實現Sleep要使用setTimeout函數使用callback的方式來實現,假定程式中有多個Sleep行為或callback後的處理繁多,則會導致程式中有大量的callback存在。
本篇的目標在於建立一個async的sleep方法。
function main(){
//do something
setTimeout(function(){//Sleep 1秒
//do something
},1000)
}
main();
一、建立方法
(一)參數定義
time:Sleep時間長度,即setTimeout的時間長度,為number類型。
(二)回傳型別
要建立一個async的方法,要注意的是回傳型別必須是Promise類型,而在TypeScript中必須要定義Promise的泛型,用以表示Promise結果類型,在本次的Sleep方法中則不需要回傳型別,所以定義回傳型別為Promise<void>。
(三)方法主體
本方法必須要回傳一個 Promise<void>,而Promise建構子中必須置入一個 (resolve : Function, reject : Function) : void 類型的參數,該參數的方法主體即非同步操作的內容,而在操作成功時將結果使用resolve函數傳回,失敗時使用reject函數傳回例外。操作結果則可以使用Promise之then、catch中捕獲。
在本篇的需求中的操作僅有setTimeout,只需要設定setTimeout的callback等於resolve即可。
(四)加入非同步關鍵字
在TypeScript中,要使用await的方法必須是async且回傳型別為Promise<T>的,所以要在這個方法加上async關鍵字。
綜合上述要點,建構出async的sleep方法如下:
async function sleep(time : number) : Promise<void>{
return new Promise<void>((res,rej)=>{
setTimeout(res,time);
});
}
二、使用方法
以下為剛才建立的sleep方法的使用範例。值得注意的是,使用await的方法本身必須是async的。
async function sleep(time : number) : Promise<void>{
return new Promise<void>((res,rej)=>{
setTimeout(res,time);
});
}
async function main(){
await sleep(2000);//延遲兩秒延遲兩秒
console.log("Hello World!");
}
main();