0
0

promiseを即時関数を使わずに書いてみた

Last updated at Posted at 2024-05-17

promiseがやっとわかった(気がした)ので投稿します。そもそもPythonからはいった身としては、promiseのサンプルに出てくる即時関数が多くて理解しにくいと感じます(単に慣れていないだけですが)。そこで即時関数を使わずに理解しようと試みたという感じです。

大前提

そもそもpromiseとはなんのためにあるか、一度整理してみると

①2つの関数ex1とex2があって、非同期処理が含まれているときはどっちが先に終わるかわからない
②画像の読み込みだとそれでも問題がない(どっちが先に表示されてもok)
③しかし、データベースの読込のように、入力をまって処理をするように場合は困る。データがないのに処理を始めてしまうので
④そこでpromiseの登場。ex1の終了をまってex2を開始する

イメージで捉える

まだピンとこない場合は、リレー競争を思い受かべてみてください。
第1走者、第2走者がいます。よーいどんで第1走者が走りだしますが、非同期のままだと第2走者も走り出しちゃいます。第2走者が走り出さないようにするのがpromiseで、バトンに相当するのがresやrejという関数です。バトンを受け取ってから第2走者が走り出します。promiseの場合はバトンの中にメッセージがあって、やり取りができるというイメージです。

stepごとに書いていきます

まず最初にPromiseのインスタンスをつくるところからになります。Promiseの正体はインスタンスで、引数にはexecutor関数(最初に実行させたい処理)を取ります。

const P1=new Promise(ex1)			//Promiseの正体はインスタンスである。引数には関数(実行させたい処理)を取る。名前をex1とした
P1.then(ex2)						//.then()も関数を引数に取る、引数は成功時に実行させたい関数である。名前をex2とした

つぎがex1関数(処理の中核です)

const ex1=(res,rej)=>{				//ex1関数は2つの引数(res, rej)を受け取る。resとrejもまた関数であり、ex1関数の中で実行される。
  setTimeout(() => {
    console.log("hello");
    res("ok");						//res関数を実行するとPromiseは成功(fulfilled)状態,rej関数を実行するとPromiseは失敗(rejected)状態になる。
									//resとrejは引数に値(例えばメッセージやデータ)を取る。この値をmesとするとmesは.then()や.catch()の引数に渡される。
  }, 2000);
}

最後がex2関数(thenメソッドの中で実行されるやつです)

const ex2=(mes)=>{					//ex2は関数、P1のメソッドである.then()や.catch()の引数に渡される関数
  console.log("then"+mes);			//ex2関数の引数にはmesがわたってくるのでex2関数内で使える。
}

以下は上をまとめたpromiseの簡単なサンプルです。

const ex2=(mes)=>{					//ex2はPromiseインスタンスのメソッド  console.log("then"+mes);			//引数にはmesがわたってくる。
}

const ex1=(res,rej)=>{				//ex1関数は2つの引数(res, rej)を受け取る。
  setTimeout(() => {
    console.log("hello");
    res("ok");						//resとrejもまた関数であり、ex関数の中で実行される。
									//res関数を実行するとPromiseは成功(fulfilled)状態,ej関数を実行するとPromiseは失敗(rejected)状態になる。
									//resとrejは引数に値(例えばメッセージやデータ)を取る。この値をmesとする
									//mesは.then()や.catch()の引数に渡される。
  }, 2000);
}
const P1=new Promise(ex1)			//Promiseの正体はインスタンスである
P1.then(ex2)						//.then()も関数を引数に取る

promiseのまとめ

Promiseの正体はインスタンスである。引数にはexecutor関数(実行させたい処理)を取る。
executor関数は2つの引数(resolve, reject)を受け取る。
resolveとrejectもまた関数であり、executor関数の中で実行される。
resolve関数を実行するとPromiseは成功(fulfilled)状態になる。
reject関数を実行するとPromiseは失敗(rejected)状態になる。
resolveとreject関数は引数に値(例えばメッセージやデータ)を取る。この値をmesとする
この値(例:メッセージ)はPromiseインスタンスのメソッドである.then()や.catch()の引数に渡される。
.then()も関数を引数に取る、この関数は成功時に実行させたい関数である。名前をex2とする
ex2関数の引数にはmesがわたされる。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0