一。什么是Promise：
Promise 是在 js 中进行异步编程的新解决方案。（以前旧的方案是单纯使用回调函数）
从语法来说，promise是一个构造函数。
从功能来说，promise对象用来封装一个异步操作，并且可以获得成功或失败的返回值。
JS中的常见的异步操作：定时器，AJAX中一般也是异步操作（也可以同步），回调函数可以理解为异步（不是严谨的异步操作）…等。
剩下的都是同步处理
二。为啥使用Promise：
promise使用回调函数更灵活。旧的回调函数必须在启动异步任务前指定。
promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至能在异步任务结束后指定多个）
promise支持链式调用，可以解决回调地狱问题。（回调地狱就是多层回调函数嵌套使用，就是套娃，这样就不利于阅读和异常处理。）
三。 promise初体验：
效果：点击一个按钮，有30%概率显示中奖。
实现： 点击按钮后得到一个1到100间的随机数，小于等于30输出中奖，否则输出没中。期间用定时器模拟异步操作，在定时器里执行判断。
（1）基础的写法：
<button id="btn">click</button>
<script>
var btn = document.querySelector（"#btn"）;
// 该函数返回一个两数之间的随机整数，包括两个数在内
function getRandomIntInclusive（min, max） {
min = Math.ceil（min）;
max = Math.floor（max）;
return Math.floor（Math.random（） * （max - min + 1）） + min; //含最大值，含最小值
}
// 点击事件
btn.addEventListener（'click',function（）{
// 1秒的定时器，模拟异步操作
setTimeout（（） => {
// 得到1到100间的一个数
let n = getRandomIntInclusive（1, 100）;
if （n <= 30） {
alert（'中奖喽'）;
} else {
alert（'没中奖'）;
}
}, 1000）;
}）
</script>
（2）promise写法，在promise里封装一个异步操作。
<script>
var btn = document.querySelector（"#btn"）;
// 得到一个两数之间的随机整数，包括两个数在内
function getRandomIntInclusive（min, max） {
min = Math.ceil（min）;
max = Math.floor（max）;
return Math.floor（Math.random（） * （max - min + 1）） + min; //含最大值，含最小值
}
// 点击事件
btn.addEventListener（'click',function（）{
// 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
const p = new Promise（（resolve,reject） => {
setTimeout（（）=>{
let n = getRandomIntInclusive（1, 100）;
if（n<=30）{
resolve（）; //将promise状态设为 “成功”
}else{
reject（）; //将promise状态设为 “失败”
}
},1000）
}）;
// 调用then方法
p.then（（）=>{
// “成功”执行这步
alert（'中奖喽'）;
},（）=>{
// “失败”执行这步
alert（'没中奖'）;
}）
}）
假如要在上面输出结果后加上选中的号码：
因为。then（）里并不能直接获得 n，所以在resolve与reject里把n当结果值返回。
// 点击事件
btn.addEventListener（'click',function（）{
// 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
const p = new Promise（（resolve,reject） => {
setTimeout（（）=>{
let n = getRandomIntInclusive（1, 100）;
if（n<=30）{
resolve（n）; //将promise状态设为 “成功”，并把结果值n返回
}else{
reject（n）; //将promise状态设为 “失败”，并把结果值n返回
}
},1000）
}）;
// 调用then方法
// value为值的意思，reason为理由的意思，都是形参
p.then（（value）=>{
// “成功”执行
alert（'中奖喽'+value）;
},（reason）=>{
// “失败”执行
alert（'没中奖'+reason）;
}）
}）
|
