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('お金が足りません');
});
}