JavaScript における Promise と Promise Chaining を理解する

約束とは何ですか?

JavaScript における Promise は、将来何かを行うという「約束」のようなものです。これは、非同期タスクの最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。簡単に言うと、Promise は、まだ利用可能ではないが将来利用可能になる値のプレースホルダーとして機能します。

約束の状態

Promise は次の 3 つの状態のいずれかで存在できます:

1. 保留中: Promise の初期状態。非同期タスクの完了をまだ待機しています。
2. Fulfilled: Promise が正常に完了し、結果の値が利用できる状態。
3. 拒否: Promise が失敗し、期待値の代わりにエラーが返される状態。

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

Promise は、Promise コンストラクターを使用して作成されます。このコンストラクターは、resolve と拒否という 2 つのパラメーターを受け取ります。どちらも関数です。

非同期操作が成功した場合は、resolve 関数を呼び出して約束を実行します。
何か問題が発生した場合は、reject 関数を呼び出して、エラーにより Promise が拒否されたことを示します。
Promise の結果は、成功の場合は .then() を使用し、エラー処理の場合は .catch() を使用して処理できます。

例: Promise の作成と使用

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

Promise が満たされると、resolve(data) は成功したデータを返します。
何か問題が発生した場合、reject(error) は .catch() で処理できるエラーをスローします。

プロミスチェーンとは何ですか?

Promise Chaining は、Promise を使用して一連の非同期タスクを次々に実行するプロセスです。チェーン内の各 .then() メソッドは、前のメソッドが完了した後に実行されます。

プロミスチェーンを使用する理由

複数の非同期操作を特定の順序で処理するための、クリーンで読みやすいコードを作成できます。各 .t​​hen() は、チェーン内の次の .then() に渡される値を返すことができるため、タスクを段階的に処理できます。

例: 複数の Promise のチェーン

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });

この例では:

約束は 1 秒後に 1 で解決されることから始まります。
後続の各 .then() は、前の結果から結果を受け取り、それを 2 倍または 3 倍にして、次の .then() に渡します。
結果は、1、2、6 のように段階的に記録されます。
チェーンでのエラー処理
.catch() を使用すると、Promise チェーン内のエラーをキャッチできます。いずれかの .then() が失敗すると、チェーンが停止し、エラーが .catch() ブロックに渡されます。

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });

Promise の主な利点

• コールバック地獄を回避: Promise により、複数の非同期操作の管理が簡素化されます。そうしないと、深くネストされたコールバック (コールバック地獄とも呼ばれます) が発生します。
• エラー処理: 最後に 1 つの .catch() を使用して、チェーン内のすべてのエラーを処理できます。
• 順次実行: Promise チェーンにより、非同期タスクが順番に実行されるようになり、コードの推論が容易になります。

結論

Promise は、非同期タスクを処理するための JavaScript の強力なツールです。 Promise Chaining を使用すると、複数の非同期操作をクリーンで読みやすい、順次的な方法で管理できます。 Promise を作成して使用する方法を理解し、Promise を連鎖させることで、JavaScript での非同期プログラミングをマスターできるようになります。

以上がJavaScript における Promise と Promise Chaining を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。