ES6 - promise（3）
上一篇熟悉了promise的具体过程：
promise的过程：
启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数（甚至可以在异步任务结束后指定多个）。
从promise的概念：{
1.promise是es6引入的一门新的JS的解决异步编程的方案。
2.从语法来说promise是一个构造函数
3.从功能上来说promise是一个封装了一个异步操作并可以获取其成功/失败结果的值的一个对象
}
我们可以知道promise不仅仅是封装了一个异步操作，并且可以获取其成功/失败结果的值。
还是以抽奖为例子，我们在抽奖的结果中加上所抽的号码
从代码中可以得知,resolve和reject都可以携带参数，并且在下面通过promise对象的实例调用then方法时，在回调函数的参数中接收resolve和reject携带的参数
源码：
<!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>
ES6 - promise（3）的更多相关文章
- ES6 - promise（1）
今天决定对之前学过的一些前端的知识进行梳理和总结,因为最近都是独自承担项目的开发与搭建,所以先从前后端交互的第一线axios来梳理,复习axios首先一定要先复习promise对象. 什么是promi ...
- ES6 - promise（2）
从上一篇中我们知道promise的概念,上一篇也提到了 promise的过程: 启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数(甚至可以在异步任务结束后指 ...
- 基础知识：Promise（整理）
基础知识:Promise(整理) (来自牛客网)下面关于promise的说法中,错误的是(D) A. resolve和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状 ...
- ES6语法（3）—— 用promise（）对象优雅的解决异步操作
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ...
- 大白话讲解Promise（二）理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
- 大白话讲解Promise（一）
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本 ...
- 关于promise（一）
该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性. 由于ES6原生提供Promise,所以无需安装Promise库.但在ES5环境下我们可以使用bluebird库 ...
- Promise （1） 如何使用Promise
Promise 也是面试高频问题, 今天我们来看看Promise是什么, 能做什么, 怎么用, 下一期我们自己来模拟一个myPromise 1 Promise 是什么 我们要学会自己给自己提问, 才 ...
- 【转】大白话讲解Promise（一）
原文地址:https://www.cnblogs.com/lvdabao/p/es6-promise-1.html ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promi ...
随机推荐
- 安卓性能测试之 adb shell 常用命令
pm list packages 列出包名adb shell pm list packages:列出所有的包名.adb shell dumpsys package:列出所有的安装应用的信息adb sh ...
- 在react项目中使用redux-thunk，react-redux，redux;使用总结
先看是什么,再看怎么用: redux-thunk是一个redux的中间件,用来处理redux中的复杂逻辑,比如异步请求: redux-thunk中间件可以让action创建函数先不返回一个action ...
- kali添加开机自启[亲测有效]
kali添加开机自启 采用systemd的方法,kali默认是没有rc.local的,需要自己创建.本方法也适用于ubuntu 18.04 64bit 改写rc-local.service 文件 先从 ...
- 攻防世界 favorite_number
favorite_number 进入环境得到源码 <?php //php5.5.9 $stuff = $_POST["stuff"]; $array = ['admin', ...
- drf路由组件（4星）
路由组件(4星) 路由Routers 对于视图集ViewSet, 我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST f ...
- Django中间件、csrf跨站请求、csrf装饰器、基于django中间件学习编程思想
django中间件 中间件介绍 什么是中间件? 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围内改变Django的输入和输出. ...
- DRF JWT认证（一）
为什么要使用JWT认证?构成和原理又是什么?怎么还有Base64的事?我都写了
- 从Windows切换到Linux？看这篇就够了！
作者:栈栈 链接:CU技术社区 微软已经马上准备在2020年1月份终止对Windows 7的支持,这意味着您将不再获得bug修复或安全更新.如果您是Windows 7的最终支持者之一,并且不想陷入一个 ...
- 记将一个大型客户端应用项目迁移到 dotnet 6 的经验和决策
在经过了两年的准备,以及迁移了几个应用项目积累了让我有信心的经验之后,我最近在开始将团队里面最大的一个项目,从 .NET Framework 4.5 迁移到 .NET 6 上.这是一个从 2016 时 ...
- grafana v8.0+ 隐藏表格字段
Select panel title → Inspect → Panel JSON Set "type" to "table-old" Apply The vi ...