利用TypeScript async/await 實作sleep方法

在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();