👋

Promiseを軽く理解する(JavaScript)

2024/05/04に公開

まずは概念や大枠からざっくりと理解する。
↓参考
https://youtu.be/9IVQYAQyDmo?si=--OibQNwA4mGN-gD
・Promise(訳:約束)

んー、ほんの少しだけ理解できたようなー、、 できてない

ChatGPTに聞いてみた

「プロミスを小学生でもわかるようにコードも踏まえて説明して」

↓プロミスを使わない場合のコード

// お菓子をもらう関数
function getSweets() {
  // お菓子をもらう処理(今は単純にコンソールログで代用)
  console.log("お菓子をもらいました!🍬");
}

console.log("友達がお菓子をもってきてくれるのを待っています...");
getSweets(); // お菓子をもらう関数を呼び出す
console.log("お菓子をもらったので、遊びます!🎮");

この場合、お菓子をもらう処理は同期的に行われます。つまり、getSweets() 関数が呼び出されると、その処理が完了するまで待ちます。そのため、お菓子をもらう処理が終わるまで、他のことはできません。

↓プロミスを使う場合のコード

// お菓子をもらう約束を表すプロミス
const promiseOfSweets = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("お菓子をもらいました!🍬");
  }, 2000); // 2秒後にお菓子をもらう
});

console.log("友達がお菓子をもってきてくれるのを待っています...");
// プロミスが成功した場合の処理を指定する(重要!!!!!)
promiseOfSweets.then(message => {
  console.log(message);
  console.log("お菓子をもらったので、遊びます!🎮");
});

この場合、promiseOfSweets プロミスは2秒後に成功することが約束されています。そして、.then() メソッドを使って、プロミスが成功したときに実行する処理を指定しています。そのため、お菓子をもらう処理が完了するまで待たずに、他のことをすることができます。

このように、プロミスを使うと、待ち時間を有効活用して他のことをすることができます。

「new Promise((resolve, reject) => {}のresolve, rejectは何?」

new Promise((resolve, reject) => {}) の中で、resolve と reject は、プロミスが完了したときに呼び出すべき関数です。
これらの関数は、非同期操作の結果をプロミスに渡す役割を果たします。

  • resolve: 非同期処理が成功した場合に呼び出される関数です。この関数には、非同期処理の結果を引数として渡します。例えば、データの取得に成功した場合には、取得したデータを resolve 関数に渡して呼び出します。
  • reject: 非同期処理が失敗した場合に呼び出される関数です。この関数には、エラーオブジェクトやエラーメッセージなどのエラー情報を引数として渡します。非同期処理が失敗した場合には、エラーの詳細を reject 関数に渡して呼び出します。

Promise入門編なのでここまで、resolve, rejectは別記事で書く

Discussion