JavaScript と React Native の約束: 作成、使用法、および一般的なシナリオ

JavaScript では、特にデータのフェッチ、アニメーション、ユーザー インタラクションがシームレスに機能する必要がある React Native のような環境では、非同期タスクの処理が不可欠です。 Promise は非同期操作を管理する強力な方法を提供し、コードをより読みやすく、保守しやすくします。このブログでは、JavaScript で Promise を作成して使用する方法と、React Native に関連する実践的な例を取り上げます。

---

約束とは何ですか?

JavaScript の

Promise は、非同期操作の最終的な完了 (または失敗) を表すオブジェクトです。これにより、より同期的に見える方法で非同期コードを処理できるようになり、古典的な「コールバック地獄」を回避できます。 Promise には 3 つの状態があります:

• 保留中: 満たされても拒否されてもいない初期状態。
• 完了: 操作は正常に完了しました。
• 拒否されました: 操作は失敗しました。

---

約束を作る

Promise を作成するには、Promise コンストラクターを使用します。このコンストラクターは、2 つのパラメーターを持つ 1 つの関数 (executor 関数) を受け取ります。

• solve: 操作が正常に完了したときに、この関数を呼び出して Promise を実行します。
• 拒否: エラーが発生した場合に Promise を拒否するには、この関数を呼び出します。

例: 基本的な Promise の作成

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

この例では:

• setTimeout を使用してデータの取得をシミュレートする Promise を作成します。
• success 変数が true の場合、何らかのデータを指定してsolve()を呼び出します。それ以外の場合は、reject() を呼び出してエラー メッセージを返します。

---

.then()、.catch()、および .finally() での Promise の使用

Promise が作成されたら、以下を使用してその結果を処理できます。

• .then() は成功した解決を処理します。
• エラーを処理するための .catch()、および
• .finally() は、結果に関係なく、Promise が解決した後にコードを実行します。

例: Promise の処理

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

この例では:

• Promise が解決されると .then() が呼び出され、データが出力されます。
• .catch() は、Promise が拒否された場合に発生するエラーを処理します。
• .finally() は、Promise が解決されたか拒否されたかに関係なく実行されます。

---

React Native での Promise の実用的な使用例

1. API からのデータの取得

React Native では、データのフェッチは一般的な非同期タスクであり、Promise を使用して効率的に管理できます。

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

ユースケース: REST API または他のネットワーク リクエストからデータを取得します。成功した応答とエラーの両方を処理する必要があります。

---

2. 順次非同期操作に Promise を使用する

ある非同期タスクが別の非同期タスクに依存する場合があります。 Promise を使用すると、一連の操作を簡単に連鎖させることができます。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

ユースケース: ユーザーにログインし、その ID に基づいてプロファイル データを取得する場合に役立ちます。

---

3. Promise.all() による複数の Promise の処理

並行して実行できる独立した Promise が複数ある場合、Promise.all() を使用すると、それらすべてが解決されるか、いずれかが拒否されるまで待つことができます。

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

ユースケース: 別々の API エンドポイントから投稿やコメントを取得するなど、複数のリソースを同時に取得します。

---

4. Promise.race() を使用したレーシングの約束

Promise.race() では、最初に解決 (解決または拒否) された Promise が結果を決定します。これは、長時間実行されるタスクのタイムアウトを設定する場合に役立ちます。

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

ユースケース: サーバーが遅いか応答しない場合でも、ネットワークリクエストが無期限にハングしないように、ネットワークリクエストのタイムアウトを設定します。

---

5. Promise.allSettled() を使用して混合結果を処理する

Promise.allSettled() は、解決するか拒否するかに関係なく、すべての Promise が解決されるまで待機します。これは、一部が失敗した場合でも、すべての Promise の結果が必要な場合に便利です。

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

ユースケース: オプションのデータ ソースの取得や複数の API 呼び出しなど、一部が失敗する可能性がある複数のリクエストを実行する場合に便利です。

---

高度なテクニック: コールバックを Promise に変換する

古いコードベースまたは特定のライブラリでは、Promise の代わりにコールバックが使用される場合があります。これらのコールバックを Promise でラップし、最新の Promise ベースの関数に変換できます。

例: Promise でのコールバックのラップ

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

ユースケース: この手法を使用すると、従来のコールバックベースのコードを Promise フレンドリーな方法で操作できるため、最新の async/await 構文との互換性が得られます。

---

まとめ

Promise は、JavaScript と React Native での非同期操作を管理するための強力なツールです。さまざまなシナリオで Promise を作成、使用、処理する方法を理解することで、よりクリーンで保守しやすいコードを作成できます。一般的な使用例を簡単にまとめます:

• API リクエスト: エラー処理を使用してサーバーからデータを取得します。
• 操作の連鎖: 依存タスクを順番に実行します。
• 並列操作: Promise.all() を使用して複数の Promise を同時に実行します。
• タイムアウトとレーシング: Promise.race() を使用してリクエスト期間を制限します。
• さまざまな結果: 部分的に失敗する可能性のあるタスクに Promise.allSettled() を使用します。
• コールバックの変換: 最新の構文との互換性を確保するために、コールバックベースの関数を Promise でラップします。

Promise を効果的に活用することで、JavaScript と React Native での非同期プログラミングをよりクリーンで、予測可能で、より堅牢にすることができます。

以上がJavaScript と React Native の約束: 作成、使用法、および一般的なシナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。