ホームページ > 記事 > ウェブフロントエンド > JavaScript で非同期プログラミングをマスターする
同期プログラミングは JavaScript における重要な概念であり、メイン スレッドをブロックすることなく API 呼び出し、ファイル読み取り、タイマーなどの操作を処理できるようになります。この概念を初めて使用する場合、または理解を深めたい場合は、この投稿が最適です!
同期プログラミングでは、タスクが次々に実行されるため、特に時間のかかる操作 (ネットワーク リクエストなど) を処理する場合、リソースの非効率な使用につながる可能性があります。非同期プログラミングを使用すると、これらの操作が完了するのを待っている間にコードを実行できるため、パフォーマンスと応答性が向上します。
主要な概念
これらの概念をそれぞれ詳しく見てみましょう。
1.コールバック
コールバックは、別の関数に引数として渡され、タスクが完了すると実行される関数です。シンプルではありますが、関数が入れ子になっている場合、コールバックは「コールバック地獄」につながる可能性があります。
function fetchData(callback) { setTimeout(() => { const data = "Data received!"; callback(data); }, 1000); } fetchData((data) => { console.log(data); // Output: Data received! });
**2.約束
**Promise は、コールバックのよりクリーンな代替手段を提供します。 Promise は、現在、将来、または決して利用できない可能性がある値を表します。保留、履行、または拒否の 3 つの状態のいずれかになります。
Promise の使用方法は次のとおりです:
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { const data = "Data received!"; resolve(data); // or reject(error); }, 1000); }); } fetchData() .then((data) => { console.log(data); // Output: Data received! }) .catch((error) => { console.error(error); });
**3.非同期/待機
ES2017 で導入された async と await は、Promise を操作するためのより読みやすい方法を提供します。関数を非同期として定義すると、その関数内で await を使用して、Promise が解決されるまで実行を一時停止できます。
async function fetchData() { return new Promise((resolve) => { setTimeout(() => { resolve("Data received!"); }, 1000); }); } async function getData() { try { const data = await fetchData(); console.log(data); // Output: Data received! } catch (error) { console.error(error); } } getData();
非同期コードを扱う場合は、適切なエラー処理が不可欠です。 Promise では .catch() を使用でき、async/await では try/catch ブロックを使用できます。
これを文脈に当てはめてみましょう。 fetch を使用して API からデータを取得する例を次に示します。これは Promise を返します。
async function fetchUserData(userId) { try { const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`); if (!response.ok) { throw new Error("Network response was not ok"); } const userData = await response.json(); console.log(userData); } catch (error) { console.error("Fetch error:", error); } } fetchUserData(1);
JavaScript の非同期プログラミングを使用すると、効率的で応答性の高いコードを作成できます。コールバック、Promise、async/await をマスターすることで、非同期操作を適切に処理できるようになります。
以上がJavaScript で非同期プログラミングをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。