MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. Promise

Promise

JavaScript
2024.02.19
記事の内容

記述方法

Promiseは、非同期処理を扱うオブジェクトです。

Promiseの説明図
Promise
記法

//　Promiseインスタンス
変数1 = new　Promise(非同期処理);

//　thenメソッド
変数2 = 変数1.then(非同期処理の成功後の処理);

//　catchメソッド
変数3 = 変数2.catch(非同期処理の失敗時の処理);

//　finallyメソッド
変数4 = 変数3.finally(非同期処理の完了後に必ず行う処理);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promiseに関して</title>
  </head>

  <body>
    <p>
      値を入力してボタンを押したら1秒後に結果が出ます。<br />
      ※2以下の数字はエラー
    </p>
    <label id="label"></label>
    <div>
      <input id="text" type="text" />
      <button id="btn">クリックしてみて♡</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let btn = document.getElementById("btn");
let label = document.getElementById("label");

// ボタンにクリックイベントリスナー
btn.addEventListener("click", function () {
  //　活性・非活性の制御
  btn.disabled = true;
  let textVal = document.getElementById("text").value;

  let instance = new Promise((resolve, reject) => {
    //1秒後に実行する処理
    setTimeout(() => {
      // 3以上の数値型
      if (Number.isFinite(textVal) || textVal > 3) {
        // 成功
        resolve(textVal);
      } else {
        // 失敗
        reject(textVal);
      }
    }, 1000);
  });

  // 成功した処理
  instance = instance.then((value) => {
    label.textContent = `値は${value}です。`;
  });

  // 失敗した処理
  instance = instance.catch((errorValue) => {
    if (errorValue != "") {
      label.textContent = `値は${errorValue}なのでエラーです。`;
    } else {
      label.textContent = "数値を入力してください。";
    }
  });

  // 完了処理の後に必ず行う処理
  instance = instance.finally(() => {
    label.textContent += "処理を終了します。";
    btn.disabled = false;
  });
});
出力結果

値を入力してボタンを押したら1秒後に結果が出ます。
※2以下の数字はエラー

チェーンメソッド

チェーンメソッドとは、メソッドを繋げて記述する方法になります。

Promise(チェーンメソッド)
記法

変数1 = new　Promise(非同期処理)
　　.then(非同期処理の成功後の処理);
　　.catch(非同期処理の失敗時の処理);
　　.finally(非同期処理の完了後に必ず行う処理);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise(チェーンメソッド)に関して</title>
  </head>

  <body>
    <p>
      値を入力してボタンを押したら1秒後に結果が出ます。<br />
      ※2以下の数字はエラー
    </p>
    <label id="label"></label>
    <div>
      <input id="text" type="text" />
      <button id="btn">クリックしてみて♡</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let btn = document.getElementById("btn");
let label = document.getElementById("label");

// ボタンにクリックイベントリスナー
btn.addEventListener("click", function () {
  //　活性・非活性の制御
  btn.disabled = true;
  let textVal = document.getElementById("text").value;

  new Promise((resolve, reject) => {
    //1秒後に実行する処理
    setTimeout(() => {
      // 3以上の数値型
      if (Number.isFinite(textVal) || textVal > 3) {
        // 成功
        resolve(textVal);
      } else {
        // 失敗
        reject(textVal);
      }
    }, 1000);
  })
    .then((value) => {
      label.textContent = `値は${value}です。`;
    })
    .catch((errorValue) => {
      if (errorValue != "") {
        label.textContent = `値は${errorValue}なのでエラーです。`;
      } else {
        label.textContent = "数値を入力してください。";
      }
    })
    .finally(() => {
      label.textContent += "処理を終了します。";
      btn.disabled = false;
    });
});
出力結果

値を入力してボタンを押したら1秒後に結果が出ます。
※2以下の数字はエラー

関数指定

チェーンメソッドとは、メソッドを繋げて記述する方法になります。

Promise(関数指定)
記法

function 関数名() {
　return new Promise((resolve, reject) => {
　　// 非同期処理
　　if (/* 成功の条件 */) {
　　　resolve(変数など);
　　} else {
　　　reject(変数など);
　　}
　});
}
関数名()
　.then(result => {
　　// 成功時の処理
　})
　.catch(error => {
　　// 失敗時の処理
　});

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise(関数)に関して</title>
  </head>

  <body>
    <p>どれか選択してボタンを押してください<br /></p>
    <div>
      <div>
        <input type="radio" id="select1" name="select" value="1" checked/>
        <label for="select1">選択1</label>
        <input type="radio" id="select2" name="select" value="2" />
        <label for="select2">選択2</label>
        <input type="radio" id="select3" name="select" value="3" />
        <label for="select3">選択3</label>
      </div>
      <button id="btn">選択ボタン</button>
    </div>
    <script src="main.js"></script>
  </body>
</html>
// 要素を取得
let btn = document.getElementById("btn");
let inputList = document.getElementsByName("select");

// ボタンにクリックイベントリスナー
btn.addEventListener("click", function () {
  //　活性・非活性の制御
  btn.disabled = true;
  
  //　ループしながら選択を判断
  inputList.forEach((input) => {
    if (input.checked == true) {
      inputValue = input.value;
    }
  });

  function syncAlert() {
    return new Promise((resolve, reject) => {
      //1秒後に実行する処理
      setTimeout(() => {
        if (inputValue == 2) {
          // 成功
          resolve("正解");
        } else {
          // 失敗
          reject("残念");
        }
      }, 1000);
    });
  }

  syncAlert()
    .then((result) => {
      alert(result);
    })
    .catch((errorValue) => {
      alert(errorValue);
    })
    .finally(() => {
      btn.disabled = false;
    });
});
出力結果

どれか選択してボタンを押してください

JavaScript
記事の内容
閉じる