【Typescript】Promise、async、awaitについて

今回はTypescriptのPromise、async、awaitについて紹介していきます。

Promiseは非同期処理をさせるときに使います。通常プログラムは上から下へ順番に実行されていきますが、非同期をさせることで時間がかかる処理を実行している間他の処理を実行させることができたり処理が終わるのを待ったりすることができます。

async、awaitもPromiseと同じように非同期処理をさせることができます。

Promiseの使い方
async、awaitの使い方

Promiseの使い方

まずはPromiseを使用せずメソッドを実行してみます。

function test() {
    setTimeout(() => {
      console.log("test");
    }, 1000);
} 

function test2(){
    console.log("test2");
}

test();
test2();

// "test2" 
// "test"

「settimeout」で1000ミリ秒「console.log」の実行を待っているので「test()」→「test2()」の順番で呼び出してもログが出力される順番は、「test2」→「test」の順番となります。

Promiseを使うことでsettimeoutを使いたい場合でも実行したい順番で処理をさせることができます。

下記のコードではtest()のメソッドの中をPromise化させてresolveの書いてある箇所の処理が終わった時にthenに書かれている「test2」処理が実行されます。

function test(){
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(console.log("test"));
    }, 1000);
  });
} 

function test2(){
    console.log("test2");
}

test().then(test2)

//"test" 
//"test2"

処理が失敗した場合には、rejectの記載がある場所の処理が終わったらthenではなくcatchに記載されている処理が実行されます。

下記の例では、numが0の場合失敗となりrejectの処理が実行され、catchの処理を実行します。

特にcatchには何も記載していないのでこの場合は失敗というログが出力されます。

function test() {
    return new Promise((resolve, reject) => {
        const num = Math.floor(Math.random() * 2);
        if (num) {
            setTimeout(() => {
                resolve(console.log("test"));
            }, 1000);
        } else {
            reject(console.log("失敗"));
        }

    });
}

function test2() {
    console.log("test2");
}

test().then(test2).catch();

async、awaitの使い方

async、awaitでもPromiseと同じような処理が可能となります。

下記の例では先頭にasyncが書かれた「test3()」というメソッドがあります。

このなかでawaitをつけて「test()」を呼び出すことで「test()」の処理が終わるまで次の処理の実行を待つことができます。

function test() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(console.log("test"));
        }, 1000);
    });
}

function test2() {
    console.log("test2");
}

async function test3() {
    await test();
    test2();
}
test3();