当前位置:
首页 > 网站开发 > JavaScript >
-
ES6 - promise(3)
上一篇熟悉了promise的具体过程:
promise的过程:
启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个)。
从promise的概念:{
1.promise是es6引入的一门新的JS的解决异步编程的方案。
2.从语法来说promise是一个构造函数
3.从功能上来说promise是一个封装了一个异步操作并可以获取其成功/失败结果的值的一个对象
}
我们可以知道promise不仅仅是封装了一个异步操作,并且可以获取其成功/失败结果的值。
还是以抽奖为例子,我们在抽奖的结果中加上所抽的号码
从代码中可以得知,resolve和reject都可以携带参数,并且在下面通过promise对象的实例调用then方法时,在回调函数的参数中接收resolve和reject携带的参数
源码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<! 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 >promise(2)</ title > </ head > < body > < div class="container"> < div id="btn">抽个奖</ div > </ div > </ body > < script > function random(m, n) { return Math.ceil(Math.random() * (n - m + 1)) + m - 1 }//生成随机数 const btn = document.querySelector('#btn') //获取按钮的dom元素 btn.addEventListener('click', function () { //resolve 解决 函数类型数据 //reject 拒绝 函数类型数据 const p = new Promise((resolve, reject) => { setTimeout(() => { let t = random(1, 100) if (t < 50 ) { resolve(t)//成功后的回调,将promise对象的状态设置为【成功】,并携带参数 } else { reject(t)//失败后的回调,将promise对象的状态设置为【失败】,并携带参数 } }, 2000) }) //用实例化后的promise对象调用then方法,在参数中传入成功/失败后要执行的方法 p.then((t) => {//在箭头函数中接收resolve和reject携带的参数 alert('恭喜中奖,'+'中奖号码为:'+t) }, (t) => { alert("再接再厉,"+'您的号码为: '+t) }) }) </ script > < style > .container { width: 100%; height: 1000px; background-color: aquamarine; display: flex; flex-direction: column; justify-content: center; align-items: center; } #btn { width: 150px; height: 50px; background-color: rgb(217, 217, 230); border-radius: 25px; text-align: center; line-height: 50px; } </ style > </ html > |
原文链接:https://www.cnblogs.com/SadicZhou/p/15737728.html
最新更新
matplotlib可视化系列之【排版】
C# 编写一个简单易用的 Windows 截屏增强工
Python 引用其他路径下的module
【Python - 基础】基础是一切升华的根本
自动化办公:手机号码提取器,使用正则
C#/VB.NET 创建图片超链接
1w+ 字总结 Java 常用类,整理太全了,建议
EasyExcel-合并单元格
Spring Boot 3 开发上线一个前后端分离的生
Spring Boot 3 开发上线一个前后端分离的生
MongoDB常用命令(2)
MongoDB基本介绍与安装(1)
SQLServer触发器调用JavaWeb接口
SQL Server索引的原理深入解析
SqlServer2016模糊匹配的三种方式及效率问题
SQL中Truncate的用法
sqlserver 多表关联时在where语句中慎用tri
链接服务器读取Mysql---出现消息 7347,级别
SQL Server解惑——为什么你拼接的SQL语句换
MySQL视图了解一下
ES6 - promise(2)
ES6 - promise(3)
面试-深拷贝
面试-函数内部声明变量
面试-闭包
vue组件传参的方法--bus事件总线
JS基础10--对象2
JS基础10--对象1
JS基础9--for循环语句
JS基础8--条件分支语句