非同期処理 自分の為の議事録

Promise について

非同期処理時の結果を保持するやつ!（一言で言うと）
結果は 3 つ種類ある

• 「Pending」 ：初期の状態、または処理待ち
• 「Fullfilled」 ：処理が成功して完了
• 「Rejected」：処理が失敗した

この 3 つの状態を処理していく事ができる！

Promise の生成方法

// 脳死
let something = new Promise(function (resolve, reject) {
  // something code
});

// アロー関数使用（イケイケ？）
let something = new Promise((resolve, reject) => {
  // something code
});

then メソッド

処理が成功して完了した時、もしくは処理が失敗した時の状態を受け取る

• 「Fullfilled」：処理が成功して完了 (resolve)
• 「Rejected」：処理が失敗 (reject)

以下に例文を記載

const validation = (password) => {
  return new Promise((resolve, reject) => {
    if (password.length >= 10) {
      resolve({
        password: password,
      });
    } else {
      reject("パスワードは10文字以上で入力してください");
    }
  });
};

let password = "1234567890";

validation(password).then(
  (result) => console.log(result), //バリデーションが成功した時の処理（resolve）
  (error) => console.log(error) //バリデーションが失敗した時の処理(reject)
);

// 実行結果
{ password: '1234567890' }

• resolve の時
  この時は password の文字列が then の引数である result に渡される

• reject の時
  この時は reject 内で記述した文字列が then の引数である error に渡される

catch メソッド

rejected ステータスを受け取る
エラー時専用メソッド！
以下に記載例

const something = new Promise((resolve, reject) => {
  reject("Faild");
}).catch((error) => console.log(error));

Promise チェーン（最後の内容）

処理が成功した際、処理が失敗、さっきのエラーが出た際に結果だけ見るなんてほぼない！
何かの処理を続けたりするのが多い（気が s..）
そんな時にチェーンで記述すれば次の制御を記述する事ができる！

const something = new Promise((resolve, reject) => {
  reject();
})
  .then(() => {
    // resolveの時
    console.log("resolve");
  })
  .catch(() => {
    // errorの時
    console.log("error");
  })
  .then(() => {
    //rejectの時
    console.log("reject");
  });

// 実行結果
error
reject

今回は reject されたから rejected ステータスを受け取る catch と then の 2 つ目が反応する。
これをうまく使えればいいね〜

###　まとめ
3 つの状態毎に処理を記載できる！

・Promiseはステータスによって処理を制御する
・fullfilledとrejectedステータスのPromiseオブジェクトを受け取るthenメソッド
・rejectedステータスのPromiseオブジェクトを受け取るcatchメソッド

以上！解散！！