首页 / 知识
前端Promise总结笔记
2023-04-11 16:23:00
一。什么是Promise：
Promise 是在 js 中进行异步编程的新解决方案。（以前旧的方案是单纯使用回调函数）
从语法来说，promise是一个构造函数。
从功能来说，promise对象用来封装一个异步操作，并且可以获得成功或失败的返回值。
JS中的常见的异步操作：定时器，AJAX中一般也是异步操作（也可以同步），回调函数可以理解为异步（不是严谨的异步操作）…等。
剩下的都是同步处理
二。为啥使用Promise：
promise使用回调函数更灵活。旧的回调函数必须在启动异步任务前指定。
promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至能在异步任务结束后指定多个）
promise支持链式调用，可以解决回调地狱问题。（回调地狱就是多层回调函数嵌套使用，就是套娃，这样就不利于阅读和异常处理。）
三。 promise初体验：
效果：点击一个按钮，有30%概率显示中奖。
实现： 点击按钮后得到一个1到100间的随机数，小于等于30输出中奖，否则输出没中。期间用定时器模拟异步操作，在定时器里执行判断。
（1）基础的写法：
<button id="btn">click</button>
<script>
var btn = document.querySelector（"#btn"）;
// 该函数返回一个两数之间的随机整数，包括两个数在内
function getRandomIntInclusive（min, max） {
min = Math.ceil（min）;
max = Math.floor（max）;
return Math.floor（Math.random（） * （max - min + 1）） + min; //含最大值，含最小值
}
// 点击事件
btn.addEventListener（'click',function（）{
// 1秒的定时器，模拟异步操作
setTimeout（（） => {
// 得到1到100间的一个数
let n = getRandomIntInclusive（1, 100）;
if （n <= 30） {
alert（'中奖喽'）;
} else {
alert（'没中奖'）;
}
}, 1000）;
}）
</script>
（2）promise写法，在promise里封装一个异步操作。
<script>
var btn = document.querySelector（"#btn"）;
// 得到一个两数之间的随机整数，包括两个数在内
function getRandomIntInclusive（min, max） {
min = Math.ceil（min）;
max = Math.floor（max）;
return Math.floor（Math.random（） * （max - min + 1）） + min; //含最大值，含最小值
}
// 点击事件
btn.addEventListener（'click',function（）{
// 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
const p = new Promise（（resolve,reject） => {
setTimeout（（）=>{
let n = getRandomIntInclusive（1, 100）;
if（n<=30）{
resolve（）; //将promise状态设为 “成功”
}else{
reject（）; //将promise状态设为 “失败”
}
},1000）
}）;
// 调用then方法
p.then（（）=>{
// “成功”执行这步
alert（'中奖喽'）;
},（）=>{
// “失败”执行这步
alert（'没中奖'）;
}）
}）
假如要在上面输出结果后加上选中的号码：
因为。then（）里并不能直接获得 n，所以在resolve与reject里把n当结果值返回。
// 点击事件
btn.addEventListener（'click',function（）{
// 下面是promise ，resolve表示解决，reject表示拒绝 ，都是函数类型数据。
const p = new Promise（（resolve,reject） => {
setTimeout（（）=>{
let n = getRandomIntInclusive（1, 100）;
if（n<=30）{
resolve（n）; //将promise状态设为 “成功”，并把结果值n返回
}else{
reject（n）; //将promise状态设为 “失败”，并把结果值n返回
}
},1000）
}）;
// 调用then方法
// value为值的意思，reason为理由的意思，都是形参
p.then（（value）=>{
// “成功”执行
alert（'中奖喽'+value）;
},（reason）=>{
// “失败”执行
alert（'没中奖'+reason）;
}）
}）
|
最新内容
相关内容
文本处理用c还是用python
文本处理用c还是用python，位置，培训，包装，对比，字符串，函数，文本，语言，字符，效率，文本处理python与c的对比：如下c++语言：C++语言实现C++中没有
python3标识符是什么?
python3标识符是什么?，数字，培训，名字，标识符，开头，代表，函数，大小写，变量，结尾，python中的标识符是用于识别变量、函数、类、模块以及其他对
python实现报表用什么?
python实现报表用什么?，工具，工作，培训，报表，内容，参数，语言，终端，矩阵，语句，python中可以使用xlwt与xlrd库读写Excel报表。xlwtPython语言中
python如何调用另一个文件夹中的内
python如何调用另一个文件夹中的内容?，系统，培训，文件，模块，内容，路径，函数，所在，前缀，语句，python中调用另外一个文件夹中的内容：1、同一文件
python中怎么对一个数进行因式分解
python中怎么对一个数进行因式分解?，代码，培训，因式分解，因数，个数，最小，整数，数组，假定，分解，1、Python因式分解代码：importtime#对一个数进
机器学习用java还是python?
机器学习用java还是python?，分析，环境，数据，培训，发展，机器，结果，控制台，生态环境，有用，机器学习用python更合适。机器学习不需要面向对象，不
python是解释型吗?
python是解释型吗?，工作，平台，培训，解释性，虚拟机，语言，高层次，源码，脚本语言，之前，python是一种跨平台的计算机程序设计语言。是一个高层次python怎么在数组添加一行?
python怎么在数组添加一行?，培训，下标，维度，数组，列表，函数，形状，元素，代表，原型，python中在数组添加一行的方法：python中可以使用stack()函数
python怎么判断文档是否有指定后缀
python怎么判断文档是否有指定后缀?，培训，后缀，文档，文件夹，路径，以上，文件，方法，更多，内容，python判断文档是否有指定后缀的方法：importosYou
python什么时候加self?
python什么时候加self?，培训，变量，方法，作用，参数，示例，函数，实例，前面，下面，想要知道python什么时候加self就需要知道self的作用。下面我们
python函数里面形参和实参一样吗?
python函数里面形参和实参一样吗?，培训，函数，参数，里面，变量，实际，形式，全称，示例，后面，python函数里面形参和实参不一样。形参全称是形式参实数是不是python的数据类型?
实数是不是python的数据类型?，数字，标准，培训，实数，数据类型，数轴，复数，有限小数，无理数，虚数，实数是python的数据类型。实数，是有理数和无理