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

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

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

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

Promise の主な特徴:

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

この 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 はコールバックに比べて大幅に改善されましたが、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 の処理方法を学ぶことが不可欠です。