JavaScript で約束を制御する

JavaScript での非同期操作の処理は、効率的で流動的なアプリケーションを作成するために不可欠です。ここで約束が重要になります。サーバーからの応答を待っている間にコードがブロックされないようにする方法を考えたことはありますか?あるいは、特定のタスクを別のタスクが完了した後にのみ実行するにはどうすればよいでしょうか?そう、JavaScript の Promise があなたが探していたソリューションです。

この記事では、Promise とは何か、Promise がどのように機能するか、そして Promise がアプリのフローをどのように改善できるかについて説明します。詳細を見ていきましょう。

JavaScript における Promise とは何ですか?

JavaScript の Promise は、非同期操作の最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。言い換えれば、Promise は非同期コードの実行を処理し、コードの作成時点ではまだ不明な値を操作できるようにする仲介手段です。

Promise の主な特徴:

• 保留中: 非同期操作がまだ終了していない初期状態。
• 解決済み: 非同期操作が正常に完了し、結果が取得されました。
• 拒否されました: 非同期操作が失敗し、理由またはエラーが提供されます。

Promise のこのライフサイクルにより、非同期操作をより明確かつ効率的に処理できるようになり、「コールバック地獄」を回避できます。

Promise を使用する理由

Promise は、サーバーへのリクエストを操作する場合に特に便利です。データを取得するために HTTP リクエストを行うと想像してください。待機時間は変動する可能性があるため、応答の到着中にアプリがフリーズすることは望ましくありません。 Promise を使用すると、コードを待たずに実行し続けることができるため、アプリケーションの全体的なパフォーマンスが向上します。

さらに、Promise は次のような他の場合にも適用できます。

• ファイル操作: ファイルがアップロードまたは処理されるのを待ってから、別のタスクを実行できます。
• DOM の変更: 他の操作を続行する前に、特定のインターフェースの変更が完了していることを確認する必要がある場合。

Promise を使用すると、複数の非同期操作をより読みやすく保守しやすい方法で連鎖させることもできます。

JavaScript で Promise を使用する方法

Promise を作成するには、Promise コンストラクターを使用して、2 つの引数 (resolve と拒否) を持つ関数を渡します。

let miPromesa = new Promise((resolve, reject) => {
    // Simulación de una operación asíncrona
    let exito = true;

    if (exito) {
        resolve("Operación exitosa!");
    } else {
        reject("Ocurrió un error.");
    }
});

Promise の結果を処理するには、.then() メソッドと .catch() メソッドが使用されます。

miPromesa
    .then((mensaje) => {
        console.log(mensaje); // "Operación exitosa!"
    })
    .catch((error) => {
        console.error(error); // "Ocurrió un error."
    });`

コールバックに対する Promise の利点

Promise が導入される前は、非同期操作の処理は主にコールバックで行われていました。ただし、これにより、特に複数のコールバックがネストされている場合、「コールバック地獄」として知られるコードの追跡と保守が困難になる可能性があります。

Promise の利点:

• 可読性: コードは読みやすく、理解しやすくなっています。
• メンテナンス: エラーの特定と処理を容易にします。
• 連鎖: 複数の非同期操作をより体系的に連鎖させることができます。

Promise と非同期/待機

Promise はコールバックに比べて大幅に改善されましたが、ECMAScript 2017 での async/await の導入により、非同期操作を処理するための構文がさらに簡素化されました。

async function obtenerDatos() {
    try {
        let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}

async/await を使用すると、コードはより線形になり、同期コードに似ていますが、内部では依然として非同期です。ただし、async/await は依然として核心で Promise を使用していることに注意することが重要です。そのため、Promise がどのように機能するかを理解することが、async/await の使用をマスターする鍵となります。

結論

JavaScript の Promise は、複数のコールバックでコードを複雑にすることなく、非同期操作を処理するための強力なツールです。サーバーへのリクエストからアプリケーション内のより複雑なタスクに至るまで、Promise を使用すると、よりクリーンで読みやすく、保守しやすいコードを作成できます。

単純な Web アプリケーションを構築しているか、より複雑なシステムを構築しているかに関係なく、コードのパフォーマンスを最適化するには、Promise の処理方法を学ぶことが不可欠です。

以上がJavaScript で約束を制御するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。