JavaScript の約束: 知っておくべき基本-jsチュートリアル-php.cn

JavaScript Promises: The Basics You Need to Know

導入

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

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

を回避できます。

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

約束とは何ですか?

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

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

完了 (タスクは成功しました)、または
拒否されました (タスクは失敗しました)。それに応じて結果を処理できます。

JavaScript での Promise の仕組み

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

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

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(): Use this method to handle the resolved value of a Promise.
catch(): Use this method to handle errors when a Promise is rejected.
finally(): This method runs code after the Promise settles, regardless of the outcome, allowing for cleanup or final actions.

4. Promise Chaining

One of the most powerful features of Promises is their ability to be chained together, allowing you to perform multiple asynchronous operations in sequence. This means each operation waits for the previous one to complete before executing, which is particularly useful when tasks depend on each other.

Let's take a look at the following example:

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);
  });

ログイン後にコピー

In this example, the fetchUserData function returns a Promise that resolves with user information. The resolved value is then passed to the fetchPosts function, which returns another Promise. If any of these Promises are rejected, the error is caught in the final .catch() method, allowing for effective error handling throughout the chain.

Conclusion

In conclusion, Promises are a crucial part of modern JavaScript, enabling developers to handle asynchronous operations in a more structured and efficient way. By using Promises, you can:

Simplify the management of asynchronous tasks and avoid callback hell.
Chain multiple asynchronous operations to maintain a clear flow of execution.
Effectively handle errors with a unified approach.

As you implement Promises in your own projects, you'll find that they not only improve code readability but also enhance the overall user experience by keeping your applications responsive. I hope that this journey through JavaScript's foundational concepts has provided valuable insights for developers. Happy coding!

以上がJavaScript の約束: 知っておくべき基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。