版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012194956/article/details/79505643
本文参考公众号:web前端教程
首先来看一下没有Promise时经常出现的一个回调:
//请求A开始
$.ajax(
success:function(res1){
//请求B开始
$.ajax(
success:function(res2){
//请求C开始
$.ajax(
success:function(res3){
});
//请求C结束
});
//请求B结束
});
//请求A结束
上面的案例:假设请求C需要依赖请求B返回的数据,所以,C只能放在B的success函数内;B需要依赖A请求得到的数据作为参数,所以B只能放在A的success函数内。那么请求的顺序应该为:请求A->请求B->请求C。
上述写法的不足:
(1)如果存在多个请求层层依赖,嵌套太多,会导致代码可读性差,不直观,调试起来也不方便,不利于后期维护
(2)如果C依赖于A和B的结果,然而A和B相互独立,那么B就必须等到A请求完成之后才能执行,消耗了更多的等待时间
对于上述回调函数层层嵌套(回调地狱)的形式存在的缺点,ES6的Promise对象可以完美解决。
由此,Promise对象能使我们更合理、更规范地进行处理异步操作。
Promise对象介绍:
Promise对象是全局对象,你可以理解成一个类,创建Promise实例的时候,要用到关键字new,参数是一个匿名函数,且匿名函数的参数分别为resolve和reject(这两个参数均为方法),其中resolve方法用于处理异步操作成功后业务,reject用于处理异步操作失败后业务。
var pro=new Promise(function(resolve,reject){
})
Promise对象有三个状态:
- pending:刚创建一个Promise对象实例的时候,表示初始状态
- fulfilled:resolve方法调用的时候,表示操作成功
- rejected:reject方法调用的时候,表示操作失败
注:如果一个promise对象没有在等待中(处于已解决或已拒绝),那么它就是settled(已解决)的。
Promise属性:
- Promise.length:其值总为1(构造器参数的数目)
- Promise.prototype
上述案例的Promise解决方法:
var pro=new Promise(function(resolve,reject){
//实例化后状态:pending
if(true){
//调用操作成功方法
resolve('操作成功');
}else{
//调用操作失败方法
reject('操作异常');
}
});
//用then处理操作成功,catch处理操作异常
pro.then(requestA)
.then(requestB)
.then(requestC)
.catch(requestError);
function requestA(){
console.log('请求A成功');
return '请求B,下一个就是你了';
}
function requestB(res){
console.log('上一步的结果:'+res);
console.log('请求B成功');
return '请求C,下一个就是你了';
}
function requestC(res){
console.log('上一步的结果:'+res);
console.log('请求B成功');
}
function requestError(){
console.log('请求失败');
}
打印结果:
Promise对象的方法:
- then():用于绑定处理操作后的处理程序。参数是两个函数,第一个用于处理操作成功后的业务,第二个用于处理操作异常后的的业务。返回Promise对象
- catch():用于处理操作异常后的业务,只接受一个参数。返回Promise对象。
- all():接受一个数组作为参数,数组的元素是Promise实例,当参数的实例对象的状态都是fulfilled时,Promise.all()才会有返回。通常用于这样的场景:我们执行某个操作,这个操作需要得到多个接口返回的数据来支持,但是这些接口之间互不依赖,不需要层层嵌套
- race():参数与all()一样,不同的是返回,只要参数中有一个状态发生变化(不管是resolved还是rejected),它就会有返回。
- resolve():将现有对象转化为Promise对象
- reject():同上。
两个有用的附加方法:
- done():总是处于回调链的尾端,保证向全局抛出任何可能出现的错误,用法同then
- finally():用于指定不论Promise对象的最后状态如何,都会执行的操作,接收一个普通回调函数作为参数,该函数不管怎样都会执行