同期プログラミングは JavaScript における重要な概念であり、メイン スレッドをブロックすることなく API 呼び出し、ファイル読み取り、タイマーなどの操作を処理できるようになります。この概念を初めて使用する場(chǎng)合、または理解を深めたい場(chǎng)合は、この投稿が最適です!

非同期プログラミングとは何ですか?

同期プログラミングでは、タスクが次々に実行されるため、特に時(shí)間のかかる操作 (ネットワーク リクエストなど) を処理する場(chǎng)合、リソースの非効率な使用につながる可能性があります。非同期プログラミングを使用すると、これらの操作が完了するのを待っている間にコードを?qū)g行できるため、パフォーマンスと応答性が向上します。

主要な概念

1. コールバック
2. 約束
3. 非同期/待機(jī)

これらの概念をそれぞれ詳しく見(jiàn)てみましょう。

1.コールバック

コールバックは、別の関數(shù)に引數(shù)として渡され、タスクが完了すると実行される関數(shù)です。シンプルではありますが、関數(shù)が入れ子になっている場(chǎng)合、コールバックは「コールバック地獄」につながる可能性があります。

function fetchData(callback) {
    setTimeout(() => {
        const data = "Data received!";
        callback(data);
    }, 1000);
}

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

**2.約束
**Promise は、コールバックのよりクリーンな代替手段を提供します。 Promise は、現(xiàn)在、將來(lái)、または決して利用できない可能性がある値を表します。保留、履行、または拒否の 3 つの狀態(tài)のいずれかになります。

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.非同期/待機(jī)

ES2017 で導(dǎo)入された async と await は、Promise を操作するためのより読みやすい方法を提供します。関數(shù)を非同期として定義すると、その関數(shù)內(nèi)で await を使用して、Promise が解決されるまで実行を一時(shí)停止できます。

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();

エラー処理

非同期コードを扱う場(chǎng)合は、適切なエラー処理が不可欠です。 Promise では .catch() を使用でき、async/await では try/catch ブロックを使用できます。

現(xiàn)実世界の例

これを文脈に當(dāng)てはめてみましょう。 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);

結(jié)論

JavaScript の非同期プログラミングを使用すると、効率的で応答性の高いコードを作成できます。コールバック、Promise、async/await をマスターすることで、非同期操作を適切に処理できるようになります。

以上がJavaScript で非同期プログラミングをマスターするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。