JavaScript で非同期プログラミングをマスターする-jsチュートリアル-php.cn

JavaScript で非同期プログラミングをマスターする

Patricia Arquette

リリース： 2024-10-31 09:32:02

オリジナル

1026 人が閲覧しました

Mastering Asynchronous Programming in 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);

ログイン後にコピー