非同期 JavaScript をマスターする: コールバック、Promise、および Async/Await

非同期JavaScript

非同期 JavaScript を使用すると、メイン スレッドから独立してタスクを実行できるため、アプリケーションの応答性と効率性が確保されます。これは、API 呼び出し、ファイル読み取り、遅延などの操作を処理する場合に特に重要です。

---

1.同期コードと非同期コード

同期コード:

• 1 行ずつ順番に実行します。
• 現在の操作が完了するまで、後続の操作をブロックします。

例：

console.log("Start");
console.log("End");
// Output:
// Start
// End

非同期コード:

• タスクが完了するまで他の操作を続行できます。
• コールバック、Promise、または async/await を使用して結果を処理します。

例：

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

---

2.非同期プログラミング手法

a.コールバック

コールバックは、別の関数に引数として渡され、非同期タスクの完了後に実行される関数です。

例:

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});

欠点:

• 複数の非同期操作を連鎖させると「コールバック地獄」が発生します。

b.約束

Promise は、現在、将来、または決して利用できない可能性がある値を表します。

約束の状態:

• 保留中: 初期状態。
• 完了: 正常に完了しました。
• 拒否: 失敗しました。

プロミスの作成:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});

エラーの処理:

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

c.非同期/待機

async と await は、Promise を操作するためのより読みやすい構文を提供します。

例:

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

エラー処理:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

---

3.非同期の使用例

a. Fetch を使用した API 呼び出し

フェッチ API は、HTTP リクエストを行う最新の方法です。

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

b.イベントリスナー

イベント処理における非同期動作。

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

c.タイマー

遅延には setTimeout と setInterval を使用します。

setTimeout(() => console.log("Timeout executed!"), 2000);

---

4.イベントループ

イベント ループは、JavaScript の非同期操作を管理するメカニズムです。タスクはキューに入れられ、次の順序で実行されます:

1. コールスタック: 同期コードを実行します。
2. タスクキュー: 非同期コールバック (setTimeout など) を実行します。
3. マイクロタスクキュー: Promise 解決を実行します。

例:

console.log("Start");
console.log("End");
// Output:
// Start
// End

---

5.よくある落とし穴

1. エラーの処理を忘れています:

   • Promise には常に .catch() または try/catch を使用してください。

2. メインスレッドをブロックしています:

   • 長時間実行される同期タスクは避けてください。

3. コールバック地獄:

   • 代わりに Promise または async/await を使用してください。

---

6.概要

Technique	Description
Callbacks	Functions executed after async tasks.
Promises	Chained mechanism for async tasks.
Async/Await	Cleaner syntax for handling promises.

JavaScript の非同期プログラミングを理解し、活用することは、応答性が高く効率的な Web アプリケーションを作成するために重要です。コールバック、Promise、async/await をマスターすることで、開発者は非同期タスクを効果的に管理できます。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上が非同期 JavaScript をマスターする: コールバック、Promise、および Async/Awaitの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。