非同期処理にPromiseが使いたくて調べた #JavaScript

promiseで実現したいこと

「3秒のカウントダウン後に、30秒のタイマーをスタートさせたい」

処理を待ってから、次の処理を実行する為にPromiseについて調べました。

Promisは何をしてくれる？

Promiseオブジェクトは非同期処理を扱える機能。
new Promiseでpromiseオブジェクトを呼ぶことができる。
Promiseのコンストラクタ引数には、非同期処理を行う関数を指定する。

サンプルコード

promiseを使用することで最初の処理が終わるまで、次の処理を待機をさせることができる。

let promise = new Promise((resolve) => {
    setTimeout(() => {
       // resolve()を呼び出すとPromiseの処理が終了
       resolve();
    }, 1000);
});

// then()メソッドで次の処理を記述
promise.then(() => {
    console.log('次の処理'); // 1秒後に実行
)};

resolve()の引数に値を入れて、then()で引数を処理することも可能。
promiseの引数は、コンソールの[[PromiseValue]]で確認することができる。

PromiseStatus

PromiseはStatus[状態]によって、処理を分岐できる。

[[PromiseStatus]]: "pending" // 待機状態（最初はここ）
[[PromiseStatus]]: "resolved" // 処理の分岐
[[PromiseStatus]]: "rejected" // 処理の分岐

サンプルコード

if文で引数に条件を設けて、promiseオブジェクトのstatusを分岐させてValueを操作できる。

 // 引数payが支払うお金として、100円より多ければchange（おつり）を返し、足りなければメッセージ（エラー）を返す
 function promiseSmaple(pay) {
      return new Promise((resolve, reject) => {
        if (pay > 100) {
          let change = pay - 100;
          resolve(change);
        }
        reject('お金が足りません');
      });
    }