JavaScript　Promiseの非同期処理を同期して処理する方法

JavaScriptでPromiseの非同期処理を同期して処理する方法について説明します。

Promiseを使った非同期処理を同期処理する方法はありますか？

Promiseを同期処理する方法にはasync/awaitを使った方法があります。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

Promiseを同期処理する – async/awaitを使った方法

Promiseは非同期処理の結果を扱うためのオブジェクトです。非同期処理を行う場合、Promiseを使うことが多いです。

　しかし、非同期処理を同期処理のように扱いたい場合もあります。そのような場合は、async/awaitを使うことで同期処理のように扱うことができます。

async/awaitは、非同期処理を同期処理のように記述するためのキーワードです。asyncを関数の前につけることで、その関数内で非同期処理を同期的に扱うことができます。

CHECK

async/awaitはECMAScript 2017で導入された新しい機能です。そのため、古いブラウザや環境では使用できないことがあります。

また、async/awaitはPromiseを返す関数のみで使用可能です。そのため、非同期処理を行う関数がPromiseを返していない場合は、Promise.resolve()やPromise.reject()を使ってPromiseに変換する必要があります。

以下は、async/awaitを利用したサンプルプログラムです。

// 非同期処理を行う関数
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('data fetched');
        }, 2000);
    });
}

// async/awaitを使った同期処理
async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

getData();

上記のサンプルプログラムでは、非同期処理を行うfetchData関数と、それを同期処理するgetData関数を示しています。

fetchData関数は、setTimeout関数を使用して2秒後に’resolved’を返すPromiseを返しています。
getData関数はasyncをつけて定義しています。これにより、この関数内でawaitを使用できるようになります。
getData関数内でfetchData関数を呼び出し、その結果をdataに代入しています。awaitを使用することで、fetchData関数が終了するまで待機し、結果を受け取ることができます。
例外処理のために、try-catchを使用しています。これにより、fetchData関数内で発生したエラーをハンドリングすることができます。

実行すると、2秒後に”data fetched”と表示されます。これにより、非同期処理が同期処理のように扱われていることが確認できます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。