Promise是管理异步的工具,可以管理成功回调和失败回调。
- Promise是用来处理一段需要执行的代码的工具。
首先用html和JavaScript写一个非常简单的游戏:
当刷新网页后,在2秒内如果我们能点击按钮5次以上,就赢得游戏,否则就输掉游戏。
<head>
</head>
<body>
<button>Click!</button>
<script>
<!-- 使用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)
</script>
</body>
但是这段代码并没有封装,也没有好的interface。
Promise是一个对象,它的构造函数非常强大,可以接受一个函数作为参数,该函数有两个参数:resolve和reject,这两个参数同时又是两个函数。
Promise的三个状态是:
- unresolved 代表某事需要完成
- resolved 代表完成了某事,并且成功
- rejected 代表完成了某事,但是并不成功
<head>
</head>
<body>
<button>Click!</button>
<script>
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!'));
</script>
</body>