了解Promise首先要了解:JS中的两种编程思想即 同步、异步
JS是单线程的 --> JS就是一个傻子,脑子一根筋,做着当前的这件事情,没有完成之前,绝对不会做下一件事情
1、同步就是 --> 上一件事情没有完成,继续处理上一件事情,只有上一件事情完成了,才会做下一件事情 --> JS中大部分都是同步编程
2、异步 --> 规划要做一件事情,但是不是当前立马去执行这件事情,需要等一定的时间,这样的话,我们不会等着他执行,而是继续执行下面的操作
–> “只有当下面的事情都处理完成了,才会返回头处理之前的事情;如果下面的事情并没有处理完成,不管之前的事情有没有到时见,都踏踏实实的给我等着”
在JS中,异步编程只有四种情况:
–>定时器都是异步编程的
–> 所有的事件绑定都是异步编程的
–> Ajax读取数据都是异步编程的,我们一般设置为异步编程
–> 回调函数都是异步编程的
什么是Promise?
Promise是解决了许多异步编程的一种方案
试想一下,我们在小=初始状态下,又一个死数据,然后需要请求回来一个新的数据,这个时候如果等待肯能会造成页面停留初始数据,这个时候就要考虑用到promise
先来看看大打印的Promise是啥把~
console.log(Promise)
打印结果: ƒ Promise() { [native code] }
这么一看就明白了,Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法!
Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
其执行过程是:执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。
注意!我只是new了一个对象,并没有调用它,我们传进去的函数就已经执行了,这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:
function aa(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
return p;
}
aa().then(function(data){
console.log(data);//随便什么数据
})
catch的用法
与Promise对象方法then方法并行的一个方法就是catch,与try catch类似,catch就是用来捕获异常的,也就是和then方法中接受的第二参数rejected的回调是一样的,如下:
function promiseClick(){
let p = new Promise(function(resolve, reject){
setTimeout(function(){
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值:',num)
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p
}
promiseClick().then(
function(data){
console.log('resolved成功回调');
console.log('成功回调接受的值:',data);
}
)
.catch(function(reason, data){
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因:',reason);
});
如果不会参考下列语法:
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败)
最后 来个面试题
setTimeout(function(){
console.log(1);
},0)
new Promise(function fn(resolve){
console.log(2);
for(var i=0;i < 10000;i++){
i == 9999 && resolve();
}
console.log(3);
}).then(function(){
console.log(4);
})
console.log(5);