JavaScript でのパンブル

JavaScript の Promise を理解する

Promise は、非同期操作の処理を簡素化する JavaScript の強力な機能です。これらは、非同期コードを操作するためのよりクリーンで直感的な方法を提供し、「コールバック地獄」のような問題を回避します。

---

約束とは何ですか?

Promise は、非同期操作の最終的な完了 (または失敗) とその結果の値を表すオブジェクトです。操作を連鎖させ、エラーを効果的に処理することで、より管理しやすい非同期コードを作成できます。

約束の状態

Promise には 3 つの状態があります:

• 保留中: 満たされても拒否されてもいない初期状態。
• 履行: 操作は正常に完了し、Promise には結果の値が含まれています。
• 拒否されました: 操作は失敗しました。Promise には失敗の理由があります (通常はエラー)。

例：

const promise = new Promise((resolve, reject) => {
  let success = true; // Change to false to simulate rejection

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

promise
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

---

Promiseメソッド

1.その後()

• 約束の履行を処理するために使用されます。
• 別の Promise を返し、チェーンを有効にします。

promise
  .then((result) => {
    console.log(result);
    return "Next Step";
  })
  .then((nextResult) => console.log(nextResult));

2.キャッチ()

• Promise の拒否を処理するために使用されます。

promise.catch((error) => console.error(error));

3.最後に()

• Promise の結果に関係なく、コードの一部を実行するために使用されます。

promise.finally(() => console.log("Cleanup actions."));

4. Promise.all()

• 配列内のすべての Promise が解決されると解決されます。
• 約束が拒否された場合はすぐに拒否します。

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);

Promise.all([promise1, promise2]).then((results) => console.log(results));

5. Promise.allSettled()

• すべての約束が解決される (履行または拒否される) まで待機します。

const promise1 = Promise.resolve("Success");
const promise2 = Promise.reject("Error");

Promise.allSettled([promise1, promise2]).then((results) => console.log(results));

6. Promise.race()

• いずれかの Promise が解決または拒否されるとすぐに解決または拒否されます。

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, "One"));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, "Two"));

Promise.race([promise1, promise2]).then((result) => console.log(result));

7. Promise.any()

• いずれかの約束が果たされ次第、解決されます。
• すべての約束が拒否された場合は拒否します。

const promise1 = Promise.reject("Error 1");
const promise2 = Promise.resolve("Success");
const promise3 = Promise.reject("Error 2");

Promise.any([promise1, promise2, promise3]).then((result) => console.log(result));

---

約束を連鎖させる

チェーンを使用すると、複数の非同期操作を順番に処理できるようになります。

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    return fetch("https://api.example.com/other-data");
  })
  .then((otherResponse) => otherResponse.json())
  .then((otherData) => console.log(otherData))
  .catch((error) => console.error("Error:", error));

---

Promise でのエラー処理

エラーは、catch() ブロックによって捕捉されるまで、Promise チェーンを通じて伝播します。

fetch("https://api.example.com/data")
  .then((response) => {
    if (!response.ok) throw new Error("Network response was not ok");
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

---

実際の使用例

Promise の実際のユースケースの詳細については、こちらをご覧ください:

<script></script>

---

結論

JavaScript Promise は、非同期操作を明確かつ効率的に処理するための堅牢な方法を提供します。 Promise をマスターすることで、よりクリーンで保守しやすいコードを記述し、コールバック地獄のような落とし穴を避けることができます。上記の方法と例を使って練習を始めれば、非同期 JavaScript の習得に向けて順調に進むでしょう!

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