JavaScriptのPromises
2519 ワード
Promiseは非同期を管理するためのツールであり、成功したコールバックと失敗のコールバックを管理することができます. Promiseは、実行すべきコードを処理するためのツールです. まずhtmlとJavaScriptを使って、非常に簡単なゲームを書きます.ホームページを更新した後、2秒以内にボタンを5回以上クリックしたら、ゲームを勝ちとします.そうでないと、ゲームに負けます. Promiseはオブジェクトであり、その構造関数は非常に強力であり、パラメータとして一つの関数を受け入れることができます.この関数は二つのパラメータがあります. Promiseの3つの状態は、 です. unresovedはあることを代表して を完成しなければなりません. resovedはあることを表現して、しかも成功しました. レジェクト代表はあることを完成しましたが、成功しませんでした.
<!-- let ， （ ）-->
let counter = 0;
<!-- ，Identifier => Expression， function return -->
document.querySelector('button').addEventListener('click', () => {
++counter;
});
<!-- -->
setTimeout(() => {
if (counter > 5){
alert('You won! Your clicks: ' + counter );
} else{
alert('Sorry, you lost!')
}
}, 2000)
function startGame(){
let count = 0;
document.querySelector('button').addEventListener('click', () => {
++count;
});
<!-- Promise-->
<!-- Promise -->
return new Promise((resolve, reject) => {
setTimeout(() => {
if(count > 5){
resolve();
}
else{
reject();
}
}, 2000)
});
}
<!-- Promise -->
startGame()
<!-- resolve -->
.then(() => alert('You win!'))
<!-- reject -->
.catch(() => alert('You lost!'));