当前位置:
首页 > 网站开发 > JavaScript >
-
ES6 - promise(2)
从上一篇中我们知道promise的概念,上一篇也提到了
promise的过程:
启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数(甚至可以在异步任务结束后指定多个)。
下面我们通过一个简单的定时器抽奖来具体的熟悉promise的执行过程
promise方案

传统方案

源码:
<!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(){ // setTimeout(()=>{ // let t = random(1,100) // if(t<50){ // alert('恭喜中奖') // }else{ // alert("再接再厉") // } // },2000) //resolve 解决 函数类型数据 //reject 拒绝 函数类型数据 const p = new Promise((resolve,reject) =>{ setTimeout(()=>{ let t = random(1,100) if(t<50){ resolve()//成功后的回调,将promise对象的状态设置为【成功】 }else{ reject()//失败后的回调,将promise对象的状态设置为【失败】 } },2000) }) //用实例化后的promise对象调用then方法,在参数中传入成功/失败后要执行的方法 p.then(()=>{ alert('恭喜中奖') },()=>{ alert("再接再厉") }) }) </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/15733003.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(1)
ES6 - promise(2)
ES6 - promise(3)
面试-深拷贝
面试-函数内部声明变量
面试-闭包
vue组件传参的方法--bus事件总线
JS基础10--对象2
JS基础10--对象1
JS基础9--for循环语句