async await の仕組み

2年 ago
海斗, 葵
1 minute

async/await は JavaScript において非同期操作を扱うためのキーワードの組み合わせです。

asyncキーワードは関数が非同期関数であることを宣言し、関数の内部にawait式を含めることができることを示します。

非同期関数を一時停止して Promise オブジェクトの解決を待ってから結果を返すためにawait構文を使用します。

async/awaitを活用すれば、非同期の処理を同期的に記述でき、コードの可読性と簡潔性が向上する。

例えば、

async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getData();

上記のコードでは、async キーワードで非同期関数 getData() を宣言し、関数本体内で await 式を使用して非同期操作の実行を一時停止し、Promise オブジェクトの解決結果を待ちます。

この例では、まず fetch 関数を使用して非同期ネットワークリクエストを送信し、そのリクエストの結果（つまり、Promise オブジェクトの解決結果）の返還を await 式で待機します。その後、再び await 式を使用して、レスポンスデータを JSON 形式に解析するのに待機します。

try-catchブロックを用いて発生する可能性のあるエラーを捕捉し、適切な処理を行うことができます。

最後に、非同期動作を開始するために getData() 関数を呼び出します。

bannerAds