async／awaitで非同期処理をシンプルに – JavaScriptで始めるプログラミング
JavaScriptで非同期処理を扱う際、callbackやPromiseを利用する方法は一般的です。しかし、async／awaitを使うことで、さらにコードをシンプルにできます。この記事では、async／awaitによる非同期処理の基礎を紹介します。
「async／await」を利用することで、非同期処理をまるで同期処理のように記述できます。
非同期処理の基本
async／awaitを使う前に、まずは非同期処理の基本を理解しましょう。Promiseを用いることで、非同期処理をより簡単に扱うことができます。例えば、次のようなコードです。
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("データを取得しました");
}, 2000);
});
}
async／awaitの基本
次に、このPromiseをasync／awaitを使って扱ってみましょう。以下のようにコードをシンプルに記述できます。
async function getData() {
const data = await fetchData();
console.log(data);
}
getData();
このように、awaitを使うことで、Promiseの結果が返されるまで待つことができます。さらに、try／catchブロックを使うことで、エラーハンドリングも簡単に行うことができます。
エラーハンドリング
非同期処理でもエラーハンドリングは重要です。async／awaitを使用することで、try／catchブロックを用いてエラー処理を行えます。
async function getDataWithErrorHandling() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error("エラーが発生しました", error);
}
}
getDataWithErrorHandling();
まとめ
以上のように、async／awaitを使用することで、非同期処理がより直感的に、かつ簡潔に記述できます。このため、JavaScriptでの非同期処理を扱う際にはasync／awaitの使用を推奨します。さらに学びたい方は、MDN Web Docs(外部リンク)を参考にすると良いでしょう。
