Promise--初体验
Posted Z && Y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise--初体验相关的知识，希望对你有一定的参考价值。
1. Promise初体验
1.1 异步任务抽奖案例
抽奖规则:
- 点击按钮, 1s 后显示是否中奖(30%概率中奖)
- 若中奖弹出 “恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券”
- 若未中奖弹出 “再接再厉”
规则说明:
因为抽奖一般会把数据传回到后台，所以我们延时1s来模拟数据传输到后台，然后从后台获取返回结果的过程。
页面结构:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
//生成随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
</script>
</body>
</html>
1.1.1 实现方法一： 定时器
JS代码：
/**
点击按钮, 1s 后显示是否中奖(30%概率中奖)
若中奖弹出 恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
若未中奖弹出 再接再厉
*/
//获取元素对象
const btn = document.querySelector('#btn');
//绑定单击事件
btn.addEventListener('click', function () {
//定时器
setTimeout(() => {
//30% 1-100 1 2 30
//获取从1 - 100的一个随机数
let n = rand(1, 100);
//判断
if (n <= 30) {
alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券');
} else {
alert('再接再厉');
}
}, 1000);
});
1.1.2 实现方法二： Promise形式实现
JS代码：
/**
点击按钮, 1s 后显示是否中奖(30%概率中奖)
若中奖弹出 恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
若未中奖弹出 再接再厉
*/
//获取元素对象
const btn = document.querySelector('#btn');
//绑定单击事件
btn.addEventListener('click', function () {
//Promise 形式实现
// resolve 解决 函数类型的数据
// reject 拒绝 函数类型的数据
new Promise((resolve, reject) => {
setTimeout(() => {
//30% 1-100 1 2 30
//获取从1 - 100的一个随机数
let n = rand(1, 100);
//判断
if (n <= 30) {
resolve(n); // 将 promise 对象的状态设置为 『成功』
} else {
reject(n); // 将 promise 对象的状态设置为 『失败』
}
}, 1000);
}).then((value) => {
alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券, 您的中奖数字为 ' + value);
}, (reason) => {
alert('再接再厉, 您的号码为 ' + reason);
});
});
1.1.3 Promise讲解
promise的构造函数
- Promise的构造函数的参数是一个函数，改函数有2个值resolve, reject；
- resolve：异步任务成功时候的回调函数，调用后将 promise 对象的状态设置为 『成功』；
- reject：异步任务失败时候的回调函数，调用后将 promise 对象的状态设置为 『失败』；
then（）方法
- then()方法的作用是Promise实例添加解决（fulfillment）和拒绝（rejection）状态的回调函数。then()方法会返回一个新的Promise实例，所以then()方法后面可以继续跟另一个then()方法进行链式调用。
- then()方法有2个参数，这2个参数都接收函数参数，第一个参数是解决（fulfillment）状态的回调函数，另外一个参数是拒绝（rejection）状态的回调函数。
小结
- promise的构造函数是同步执行
- promise.then中的函数是异步执行
以上是关于Promise--初体验的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象