JavaScriptのasync/await関数とは？Promiseを活用した非同期処理の基本

Promiseオブジェクトは、非同期処理の最終的な完了（または失敗）と、その結果得られる値を表すものです。async/await関数は、このPromiseを基盤として動作します。

async/awaitを使うことで、内部では非同期タスクを実行しながら、コードの見た目は完全に同期的に記述できます。これにより、ネストが深くなりがちなコールバックスタイルを避け、可読性の高いコードを書くことが可能になります。

Promiseを返す非同期関数の例

たとえば、2秒後に値100で解決されるPromiseを返す非同期関数を考えてみましょう。

// 2秒後に100で解決されるPromise
function getHundred() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(100);
        }, 2000);
    });
}

従来のコールバック方式での利用

この関数を別の関数の中で使いたい場合、戻り値を待つ必要があります。コールバックを使うと、次のように記述することになります。

function useGetHundred() {
    getHundred().then((value) => {
        console.log(value);
    })
}

しかしこの方法では、取得したデータに対して処理を行うために、不要なコールバック関数を作成しなければなりません。そこで役立つのがasync/awaitです。これを使うことで、コードを大幅にシンプルにできます。

async/awaitを使った書き方

例

// async関数を宣言する。この関数自体も呼び出されるとPromiseを返す
// 関数内ではawaitキーワードによって、非同期処理を同期的に扱える
async function useGetHundredAsync() {
    // getHundredのPromiseが解決されるのを待ち、その値をvalueに格納する
    let value = await getHundred();
    console.log(value)
}

出力

100

awaitキーワードを使うと、Promiseが解決されるまでその行で処理が一時停止し、結果の値を直接変数に受け取ることができます。async/awaitは、モダンなJavaScriptにおける非同期処理の標準的な書き方として広く採用されており、エラーハンドリングもtry/catch構文で直感的に行えるというメリットがあります。