導入

JavaScript は シングルスレッド プログラミング言語です。つまり、一度に 1 つのタスクしか実行できません。データの取得やタイマーの設定などの非同期操作ではこれが難しくなり、実行フローがブロックされ、アプリの速度が低下する可能性があります。

スレッドをフリーズさせずにこれらの非同期タスクを処理するには、非同期プログラミングを簡素化する強力なツールである Promise を使用します。 Promises を使用すると、長時間実行されるタスクをより効果的に管理し、よりクリーンで読みやすいコードを作成し、恐ろしい「コールバック地獄」

この記事では、Promises とは何なのか、どのように機能するのか、どのように非同期プログラミングを簡略化するのかを理解していただくことを目的としています。

約束とは何ですか?

レストランで食事を注文していると想像してください。注文が完了したら、料理が準備されるまでキッチンで待つ必要はありません。代わりに、キッチンがバックグラウンドで食事を準備している間、会話をしたり、雰囲気を楽しんだりできます。レストランは、準備ができたら料理を提供することを約束します。この約束は信頼できます。なぜなら、最終的には 2 つのうちの 1 つが起こるからです。食事が到着する (満たされた) か、キッチンから注文を完了できないと通知される (拒否されました) かのどちらかです。 ).

JavaScript では、Promises も同様に機能します。サーバーからデータを取得するなど、時間のかかる処理を JavaScript に依頼すると、Promise が返されます。この Promise では、すぐには結果が得られません。代わりに、「作業が完了したら連絡します。」というメッセージが表示されます。その間、コードの残りの部分は実行され続けます。タスクが完了すると、Promise は次のいずれかになります:

• Fulfilled (タスクは成功しました)、または
• Rejected (タスクは失敗しました)。それに応じて結果を処理できます。

JavaScript での Promise の仕組み

A Promise は、現在、将来、または決して利用できない可能性がある値を表します。 3 つの状態があります:

• 保留中: タスクはまだ進行中であり、最終結果 (達成または拒否) はまだ決定されていません。
• Fulfilled: タスクは正常に完了し、結果が表示されます。
• 拒否されました: タスクは失敗しました。エラーは処理可能です

1. 約束を作る

Promise を作成するには、Promise コンストラクターを使用します。このコンストラクターは、resolve と拒否の 2 つのパラメーターを持つ関数 (エグゼキューターと呼ばれます) を受け取ります。 Promise が満たされると、resolve 関数が呼び出されます。一方、拒否されると、reject 関数が呼び出されます。

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. 約束の解決と拒否

Promise が作成されたら、resolve または拒否のいずれかを呼び出して結果を決定できます:

• solve(value): 非同期操作が正常に完了したときにこの関数を呼び出します。 Promise が履行されるのを待っているハンドラーに値を渡します。
• 拒否(エラー): 操作が失敗した場合にこの関数を呼び出します。 Promise が拒否されるのを待っているハンドラーにエラー メッセージを渡します。

3. Promise の消費

プロミスを作成したら、次のステップはそれを使用することです。 JavaScript には、Promises の結果を処理するためのメソッド .then()、.catch()、および .finally() がいくつか用意されています。これらのメソッドはそれぞれ特定の目的を果たし、非同期操作の結果を効果的に管理できるようにします。

• .then() による解決された Promise の処理: .then() メソッドは、Promise が満たされたときに何が起こるかを指定するために使用されます。これは 2 つのオプションの引数を取ります。解決された値のコールバックと、拒否を処理するためのコールバックです。

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• .catch() による拒否の処理: .catch() メソッドは、Promise の実行中に発生するエラーを処理するように特別に設計されています。これにより、拒否に対処する明確な方法が得られます。

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• .finally() を使用した最終アクションまたはクリーンアップ アクション: .finally() メソッドを使用すると、Promise が満たされたか拒否されたかに関係なく、それが確定した後にコードを実行できます。これは、成功シナリオと失敗シナリオの両方で実行する必要があるクリーンアップ アクションまたはタスクに役立ちます。

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

簡潔に言うと:

• then(): このメソッドを使用して、Promise.
の解決された値を処理します。
• catch(): このメソッドを使用して、Promise が拒否された場合のエラーを処理します。
• finally(): このメソッドは、結果に関係なく Promise が解決した後にコードを実行し、クリーンアップまたは最終アクションを可能にします。

4. プロミスチェーン

Promise の最も強力な機能の 1 つは、Promise をチェーンして複数の非同期操作を順番に実行できることです。これは、各操作が前の操作の完了を待ってから実行されることを意味します。これは、タスクが相互に依存している場合に特に便利です。

次の例を見てみましょう:

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

この例では、fetchUserData 関数はユーザー情報で解決される Promise を返します。解決された値は fetchPosts 関数に渡され、別の Promise が返されます。これらの Promise のいずれかが拒否された場合、エラーは最後の .catch() メソッドで捕捉され、チェーン全体で効果的なエラー処理が可能になります。

結論

結論として、Promise は最新の JavaScript の重要な部分であり、開発者がより構造化された効率的な方法で非同期操作を処理できるようにします。 Promise を使用すると、次のことが可能になります:

• 非同期タスクの管理を簡素化し、コールバック地獄を回避します。
• 複数の非同期操作を連鎖させて、明確な実行フローを維持します。
• 統一されたアプローチでエラーを効果的に処理します。

Promise を独自のプロジェクトに実装すると、コードの可読性が向上するだけでなく、アプリケーションの応答性を維持することで全体的なユーザー エクスペリエンスも向上することがわかります。 JavaScript の基本概念を巡るこの旅が、開発者にとって貴重な洞察を提供できれば幸いです。コーディングを楽しんでください!