JavaScript の約束を理解する: 初心者ガイド

JavaScript は Web 開発に広く使用されている強力な言語であり、最新の JavaScript で理解する必要のある重要な概念の 1 つが Promises です。非同期コードやコールバックに苦労したことがある場合、または単によりクリーンで読みやすいコードを作成したい場合は、Promise を理解することが必須です。この投稿では、Promise とは何か、Promise がどのように機能するか、そして Promise を使用して非同期操作をより効果的に処理する方法について詳しく説明します。

約束とは何ですか?

JavaScript では、Promise は、非同期操作の最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。これは、操作が完了すると解決される将来の値のプレースホルダーのようなものです。

Promise は、深くネストされた構造と管理の難しさから「コールバック地獄」と呼ばれることが多い、従来のコールバックベースの非同期コードに比べて大幅な改善です。

約束はどのように機能するのでしょうか?

Promise は次の 3 つの状態のいずれかになります。

1. 保留中: Promise が履行も拒否もされていないときの初期状態。
2. Fulfilled: 操作が正常に完了し、Promise が値で解決されたときの状態。
3. 拒否: 操作が失敗し、理由 (エラーなど) を付けて Promise が拒否されたときの状態。

let myPromise = new Promise((resolve, reject) => {
    let success = true; // Simulating an operation

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("The operation failed.");
    }
});

myPromise.then((message) => {
    console.log(message); // This will run if the Promise is fulfilled
}).catch((error) => {
    console.error(error); // This will run if the Promise is rejected
});

上記の例では、「success」変数が「true」の場合は「myPromise」が解決され、「false」の場合は「reject」が解決されます。 ".then()" メソッドは満たされた状態を処理するために使用され、".catch()" はエラーを処理するために使用されます。

約束を連鎖させる

Promise の最も強力な機能の 1 つは、Promise をチェーンできることです。これにより、コールバック地獄に陥ることなく、複数の非同期操作を順番に実行できます。

myPromise
    .then((message) => {
        console.log(message);
        return new Promise((resolve, reject) => {
            resolve("Another operation completed!");
        });
    })
    .then((newMessage) => {
        console.log(newMessage);
    })
    .catch((error) => {
        console.error(error);
    });

この例では、最初の Promise が満たされた後に 2 番目の「.then()」が実行され、非同期操作のスムーズで読みやすいフローが可能になります。

複数の Promise の処理

場合によっては、複数の非同期操作が完了するまで待つ必要があります。ここで、「Promise.all()」と「Promise.race()」が役立ちます。

Promise.all()

このメソッドは Promise の配列を受け取り、配列内のすべての Promise が解決された場合に解決される単一の Promise を返し、いずれかの Promise が拒否された場合には拒否されます。

let promise1 = Promise.resolve("First operation");
let promise2 = Promise.resolve("Second operation");

Promise.all([promise1, promise2]).then((values) => {
    console.log(values); // ["First operation", "Second operation"]
});

Promise.race()

Promise.race() も Promise の配列を受け取りますが、配列内の Promise の 1 つが解決または拒否されるとすぐに、解決または拒否される Promise を返します。

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, "First operation"));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Second operation"));

Promise.race([promise1, promise2]).then((value) => {
    console.log(value); // "Second operation"
});

結論

Promise は JavaScript の非同期プログラミングの基礎となっており、開発者はよりクリーンで管理しやすいコードを作成できるようになります。複数の Promise を作成、チェーン、処理する方法を理解することで、非同期 JavaScript の習得に向けて確実に進むことができます。

Promise を初めて使用する場合は、このガイドが入門に役立つことを願っています。さらに練習すると、Promise が JavaScript ツールキットの貴重なツールであることがわかります。

お気軽にコメントでご意見やご質問を共有してください。仲間を繋いで強力なコミュニティを構築しましょう。

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