JavaScript入門 - 非同期処理
非同期処理
async/awaitを使って非同期処理を学びます。
タスク
非同期関数の定義
async/awaitを使って非同期関数を定義してみましょう。
Promiseの使用
Promiseを使って非同期処理を実装してみましょう。
エラーハンドリング
try/catchを使ってエラーハンドリングを実装してみましょう。
非同期処理の実行
ボタンクリックで非同期処理を実行してみましょう。
ヒント
Promiseとasync/awaitを使って非同期処理を実装してみましょう。
参考コード
// 非同期処理の例
const asyncBtn = document.getElementById("asyncBtn");
const output = document.getElementById("output");
// 非同期関数の定義
async function fetchData() {
try {
// 非同期処理のシミュレーション
const response = await new Promise(resolve => {
setTimeout(() => {
resolve({ data: "非同期処理が完了しました！" });
}, 2000);
});
return response.data;
} catch (error) {
console.error("エラーが発生しました:", error);
throw error;
}
}
// イベントリスナーの設定
asyncBtn.addEventListener("click", async function() {
try {
output.textContent = "処理中...";
const result = await fetchData();
output.textContent = result;
} catch (error) {
output.textContent = "エラーが発生しました";
}
});