JavaScript と React Native の約束: 作成、使用法、および一般的なシナリオ-jsチュートリアル-php.cn

Promises in JavaScript and React Native: Creation, Usage, and Common Scenarios

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 構文との互換性が得られます。