抽奖

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}</style>
</head>
<body><h4>promise初体验</h4><button id="btn">抽奖</button><script>//promise初体验function isZj(n,m){return Math.ceil(Math.random()*(n-m+1)) + m-1}const btn = document.querySelector('#btn')btn.addEventListener('click',function() {let p = new Promise((resolve,reject)=>{setTimeout(() => {let n = isZj(1,100)if(n<=30) resolve(n) //reslove 让promise对象的状态变成为成功状态else reject(n) //reject  让promise对象的状态变成为失败状态}, 1000)})p.then((value) => {alert('恭喜你中奖了,你的幸运号码是:'+value)},(reaseon) => {alert('再接再厉,你的幸运号码是:'+reaseon)})})</script>
</body>
</html>

效果：

promise参数说明：

let p = new Promise((resolve,reject)=>{setTimeout(() => {let n = isZj(1,100)if(n<=30) resolve(n) //reslove 让promise对象的状态变成为成功状态else reject(n) //reject  让promise对象的状态变成为失败状态}, 1000)})

1.resolve参数：

成功的时候调用 resovle() 让promise对象的(pending)状态变成功(resolved)状态

2.reject参数：

失败的时候调用 reject() 让promise对象的(pending)状态变失败(rejected)状态

处理promise返回的结果

   p.then((value) => {alert('恭喜你中奖了,你的幸运号码是:'+value)},(reaseon) => {alert('再接再厉,你的幸运号码是:'+reaseon)})

1.通过p.then()方法处理返回的结果

2.第一个参数是成功后的回调函数 => resolve(n)

3. 第二个参数是失败后的回调函数 => reject(n)

Promise初体验相关推荐

ES6 Generator 初体验
2019独角兽企业重金招聘Python工程师标准>>> ES6 Generator 初体验听说 ES6 的 Generator 是一个很神奇的函数,所以去了解了一下. 因为它不同于 ...
在JS 中使用 fetch 初体验
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest ...
万兆局域网方案_万兆内网初体验
原标题:万兆内网初体验看到这个标题你可能会说,我的宽带才100M,我要万兆内网有什么用? 那么如果你属于下列情况之一: 用电视/电脑看4K影片,视频收集控拥有或即将拥有NAS和海量存储需求内网有 ...
小白的高德地图初体验(一) —— 打点
小白的高德地图初体验(一)--打点说到高德地图,肯定要推荐官方文档,☛☛☛传送门,走你~~ ☞☞小白的高德地图初体验(一) -- 打点 ☞☞小白的高德地图初体验(二)--点聚合 ☞☞小白的高德地图初 ...
苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...

Promise初体验

抽奖

代码：

效果：

promise参数说明：

1.resolve参数：

2.reject参数：

处理promise返回的结果

1.通过p.then()方法处理返回的结果

2.第一个参数是成功后的回调函数 => resolve(n)

3. 第二个参数是失败后的回调函数 => reject(n)

Promise初体验相关推荐

最新文章

热门文章