1.为什么要学promise
解决回调地狱问题，美化代码。关于对地狱回调的理解，可以参考这个文章地狱回调理解
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击抽奖</button>
<div id="result"></div>
</body>
<script>
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1) + m - 1);
}
btn = document.getElementsByTagName("button")[0];
btn.addEventListener("click", function () {
const p = new Promise((resolve, reject) => {
setTimeout(() => {
let n = rand(1, 100);
if (n <= 30) {
resolve(n);
} else {
reject(n);
}
}, 1000);
});
p.then(
(value) => {
alert("恭喜恭喜！中奖10万！！,你的号码为："+value);
},
(value) => {
alert("再接再厉，你的号码为："+value);
}
);
});
</script>
</html>
3.代码讲解
- Math.random()方法，取0-1之间的随机数。
- Math.ceil()，向上取整数，比如4.75返回5,0.75返回0.7。
- 关于Promise相关的内容，在之后的博客中会有详细讲解。
4.运行结果
