LoginSignup
1
0

More than 3 years have passed since last update.

new Promise(function(onFulfilled, onRejected)) のonFullfilledとonRejectedってなにもの??

Posted at

JSの勉強会をしていたときに
new Promise(function(onFulfilled, onRejected)) のonFullfilledとonRejectedってなにもの??
となったので自分なりにまとめてみることにした

まず、なにが疑問なのか

Promiseのインスタンス生成のとき
非同期処理の内容を記述した関数を引数に指定する
こんな感じ

new Promise(
  function(onFulfilled, onRejected) {
    /* 非同期の処理を記述 */
  }
)

これのonFulfilled, onRejectedが何なのか・どういう関数なのかという話

onFulfilledとonRejected

onFulfilledとonRejectedの説明書きはされていて、以下のように書かれている

onFulfilled
処理が正常に終了し結果が得られた場合に実行させるもの
これが実行される時はプロミスはfulfilled(成功)の状態

onRejected
処理の結果エラーが起こった場合に実行させるもの
これが実行される時はプロミスはrejected(失敗)の状態

ふむふむ、そうね、成功のときはonFulfilled、失敗のときはonRejectedという認識でした
この説明はわかっていそう

ひとまず、Promiseについて書かれているコレを読んでみた
JavaScript Promiseの本

Promiseのリファレンスも読んでみて、なんだかわかったような、さらに深みにハマっているような、、、そんな気持ちになってしまった。。。

Promiseの処理の例を書いてみた

function dispSmile(str) {
  return new Promise(
    function(onFulfilled, onRejected) {
      if(str != 'OK') {
        onRejected(new Error()); // 失敗の状態を返す
      }
      else onFulfilled(console.log(☺︎)); // 成功の状態を返す
      // onFulfilledまたはonRejectedのどちらかを返さなければこのPromiseは終了しない
    }
  )
}

引数の値が'OK'のときはFulfilledの状態を返し、onFulfilled()の引数の値は次の処理に渡す値になってる
引数の値が'OK'以外はRejectedの状態を返し、onRejected()でエラーを返すようになっている
なので結果はこんな感じ

// 実行結果
dispSmile('OK'); // ☺︎
dispSmile('No'); // Error

例えば以下のようなPromiseを返すと、状態は呼び出されてもPending(初期状態)のままになる

function dispSmile(str) {
  return new Promise(function(onFulfilled, onRejected) {})
}

onFulfilledとonRejectedは、関数で、状態によって実行される処理、ということかな・・・

うーん、まだスッキリという感じではないけれど
Promiseの状態の持ち方は以前より理解できた気がするのはよかった

もう少し勉強してみて理解を深めていきたい

1
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
1
0