JavaScript的Promises
2017-08-23 本文已影响22人
黑山老水
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>
