一、介绍
Promise是异步编程的一种解决方案,其实是一个构造函数,自身身上有all,reject,resolve,这几个方法,原型上有then、catch,等方法。
ps:什么是异步编程: fs读取文件、发送ajax、定时器运用等等。
我们可以通俗理解为异步就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有”堵塞“效应。比如,有一个任务是读取文件进行处理。
这种不连续的执行,就叫做异步。相应地,连续的执行,就叫做同步
"异步模式"非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。
二、简单的运用
-
- new一个Promise对象(pending状态)包装异步操作,执行操作,成功了执行resolve函数,promise状态改为成功,成功再调用then方法时,调用第一个参数,也就是第一个回调函数中的代码,返回一个新的promise对象
?
1.先看回调函数运用
setTimeout(()=>{
//30%中奖概率
let n = rand(1,100);
if(n<=30){
alert('恭喜恭喜 奖品 10万rmb 劳斯莱斯优惠券');
console.log(n)
}else{
alert('再接再厉');
console.log(n)
}
},3000)
2.promise运用
//Promise本身是一个对象,对象里面包裹异步操作()
//Promise实现 promise是一个构造函数,在实例化的时候,会接受一个参数,这个参数还是一个函数类型的值
const p = new Promise((resolve, reject) => { //这个函数有两个形参(两个函数类型的数据)
//Promise可以包裹一个异步操作
//30%中奖概率
setTimeout(() => {
let n = rand(1, 100);
//判断
if(n<=30){ //封装异步操作之前还可以获取异步操作的结果值(实参)
resolve(n); //将promise 对象状态设置为成功 可以理解为传入了一个函数别人帮你调用(成功的时候调用)
}else{
reject(n); //将promise对象的状态设置为失败 失败的时候调用(理解这就是一个函数,失败的时候别人会调用)
}
}, 1000);
});
//调用 then 方法 成功与失败的需求做一个实现(内容的输出)
p.then((value) => { //即n 形参的形式接收 then方法也是p对象上的方法
//第一个函数是对象成功时的回调 resolve的回调
alert('恭喜恭喜 奖品 10万rmb 劳斯莱斯优惠券,你中奖的数字:'+value);
}, (reason) => { //即n
alert('再接再厉,你的号码为:'+reason);
}); //两回调函数
三、回调地狱问题
回调函数里面嵌套着回调:
/* setTimeout(()=>{
console.log('逻辑1');
setTimeout(()=>{
console.log('逻辑2');
setTimeout(()=>{
console.log('逻辑3');
},5000)
},5000)
},5000) */
Promise解决:
new Promise((resolve,reject) => {
//第一次网络请求的代码
setTimeout(() => {
resolve();//网络请求成功的时候调用resolve,调用完resolve之后就会继续回调.then()
},3000)
}).then(() => {
//第一次拿到结果的处理代码
console.log("逻辑1");
return new Promise((resolve,reject) => {
//第二次网络请求的代码
setTimeout(() => {
resolve();//网络请求成功的时候调用resolve,调用完resolve之后就会继续回调.then()
},3000)
})
}).then(() => {
//第二次拿到结果的处理代码
console.log("逻辑2");
return new Promise((resolve,reject) => {
//第三次网络请求的代码
setTimeout(() => {
resolve();//网络请求成功的时候调用resolve,调用完resolve之后就会继续回调.then()
},3000)
})
}).then(() => {
//第三次拿到结果的处理代码
console.log("逻辑3");
})
|