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(外部リンク)を参考にすると良いでしょう。