TypeScriptでAsync/Awaitを使ってみる。

動作環境

> tsc --version
Version 2.2.1

やりたいこと

サンプルとして、非同期で実行する3つの処理がある。
func1()、func2()、func3()とする。

func1()は”1秒後”に”1″を出力する。
func2()は”2秒後”に”2″を出力する。
func3()は”3秒後”に”3″を出力する。

function func1() {
    setTimeout(() => {
        console.log(1);
    }, 1000);
}

function func2() {
    setTimeout(() => {
        console.log(2);
    }, 2000);
}

function func3() {
    setTimeout(() => {
        console.log(3);
    }, 3000);
}

これを、321の順番に出力したい。

そのまま実行する

function func1() {
    setTimeout(() => {
        console.log(1);
    }, 1000);
}

function func2() {
    setTimeout(() => {
        console.log(2);
    }, 2000);
}

function func3() {
    setTimeout(() => {
        console.log(3);
    }, 3000);
}

function main() {
    func3();
    func2();
    func1();
}

main();

実行結果

1
2
3

関数は、func3()・func2()・func1()の順番に実行しても、出力は”123″の順番になる。

Promiseを使う

Promiseを使って書き直す。

func1()・func2()・func3()はPromiseを返すように変更する。

function func1(): Promise<any> {
    return new Promise<any>(resolve => {
        setTimeout(() => {
            console.log(1);
            resolve();
        }, 1000);
    });
}
function func2(): Promise<any> {
    return new Promise<any>(resolve => {
        setTimeout(() => {
            console.log(2);
            resolve();
        }, 2000);
    });
}
function func3(): Promise<any> {
    return new Promise<any>(resolve => {
        setTimeout(() => {
            console.log(3);
            resolve();
        }, 3000);
    });
}

Promiseのthen()を使って、順番に実行する。

function main() {
    func3().then(resolve => {
        return func2();
    })
    .then(resoluve => {
        return func1();
    });
}

main();

実行結果

3
2
1

期待する結果が得られた。

Async Awaitを使う

main()関数を修正する。

async function main() {
    await func3();
    await func2();
    await func1();
}

実行結果

3
2
1

期待する結果が得られた。

Promiseのthen()を使っていたコードよりも簡潔にコードを記述できた。

awaitをつけると、Promiseが終了するまで次の処理が始まらない。
awaitは、asyncがついた関数の中でなければ利用できない。

戻り値を受け取る

awaitを使うとき、戻り値を受け取ることができる。

次のコードでは、func1()が返すPromiseの戻り値を受け取り、出力する。

function func1(): Promise<string> {
    return new Promise<string>(resolve => {
        setTimeout(() => {
            console.log(1);
            resolve("OK");
        }, 1000);
    });
}

async function main() {
    const ret = await func1();
    console.log(ret);
}

main();