JavaScript での Promise の探索-jsチュートリアル-php.cn

JavaScript での Promise の探索

Barbara Streisand

リリース： 2025-01-19 14:34:11

オリジナル

148 人が閲覧しました

Exploring Promises in JavaScript

非同期 JavaScript をマスターするには、多くの場合、Promise を理解する必要があります。最初は気が遠くなりますが、Promise は一度理解すると非常に貴重なツールになります。このガイドでは、Promise とは何か、その機能と重要性を明確にします。

JavaScript の約束を理解する

Promise は、非同期操作の最終的な成功または失敗を表す JavaScript オブジェクトです。基本的に、API データの取得やファイルの読み取りなど、すぐに結果を返さない操作を管理します。

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

保留中: 操作は進行中です。
完了: 操作は成功しました。
拒否されました: 操作は失敗しました。

一度履行または拒否されると、Promise の状態は固定されます。

約束の必要性

JavaScript はシングルスレッドであるという性質により、一度に 1 つの操作を処理します。非同期操作により、メインスレッドのブロックが防止されます。 Promise が登場する前はコールバックが標準でしたが、ネストされたコールバックではコードが複雑で保守が困難になりました。 Promise は、非同期タスクを管理するための、よりクリーンで読みやすい代替手段を提供します。

約束の解剖学

Promise の作成では Promise コンストラクターを使用し、resolve および reject 引数を持つエグゼキューター関数を受け入れます。

<code class="language-javascript">const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Operation successful!");
  } else {
    reject("Operation failed.");
  }
});</code>

ログイン後にコピー

resolve: 操作が正常に完了すると呼び出されます。
reject: 操作の失敗時に呼び出されます。

プロミスの利用

.then()、.catch()、および .finally() は Promise の結果を処理します:

<code class="language-javascript">myPromise
  .then(result => {
    console.log(result); // "Operation successful!"
  })
  .catch(error => {
    console.log(error); // "Operation failed."
  })
  .finally(() => {
    console.log("Operation complete.");
  });</code>

ログイン後にコピー

.then(): フルフィルメント時に実行します。
.catch(): 拒否時に実行します。
.finally(): 結果に関係なく実行します。

現実世界のアプリケーション: データの取得

Promise は API で頻繁に使用されます。 fetch API の例を次に示します:

<code class="language-javascript">fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response failed");
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Fetch error: ", error);
  });</code>

ログイン後にコピー

この例は次のことを示しています:

fetch Promise を返します。
最初の .then() は応答を解析します。
2 番目の .then() 処理は解析されたデータです。
.catch() エラー処理。

高度なテクニック: Promise Chaining

プロミスチェーンは重要な利点です。各 .then() は新しい Promise を返し、連続した非同期操作の実行を可能にします:

<code class="language-javascript">getUser()
  .then(user => getUserPosts(user.id))
  .then(posts => displayPosts(posts))
  .catch(error => console.error(error));</code>

ログイン後にコピー

これにより、コードの明瞭さが維持され、深くネストされたコールバックが回避されます。

非同期/待機: 簡略化された構文

ES2017 の async/await は Promise の処理を簡素化し、非同期コードを同期的に見せます:

<code class="language-javascript">const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Operation successful!");
  } else {
    reject("Operation failed.");
  }
});</code>

ログイン後にコピー

async/await は Promise に基づいて構築されています。 async/await を効果的に使用するには、Promise を理解することが不可欠です。

Promise の主な利点