具备以下两种特点
promise有三种状态:Pending
(进行中)、Resolved
(已完成,又称Fulfilled)和Rejected
(已失败)
一旦状态改变,就不会再变,任何时候都可以得到这个结果。
基础用法:
javascript
new Promise(function(succ,fail){
let res=Math.random()
if(res>0.5){
succ(res)//成功返回
}else{
fail(res)//失败返回
}
})
.then(function(res){
console.log("成功返回结果:"+res);
},function(res){
console.log("失败返回结果:"+res);
})
.catch(function(err) {
console.log("统一异常处理:"+err);
})
//结果:
//失败返回结果:0.3700134152652388
//成功返回结果:0.8785768247854773
首先说明一个地方:Promise
一旦新建它就会立即执行,无法中途取消。
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve(成功回调方法)
和reject(失败回调方法)
。
在传入promise的方法中,你需要告诉他这次的处理结果状态,也就是代码中的succ和fail方法,这分别会把promise的状态变成
succ:Pending
-》Resolved
fail:Pending
-》Rejected
然后调用了succ或fail方法后,就会对应进入then方法中,then方法支持两个参数,入参类型均为函数,第一个为成功时的回调方法,第二个为失败时的回调方法。
通过结果可知promise中一旦调用了succ或fail方法后,就会到then里面对应的回调方法。
简单可以总结成以下的伪代码
scss
new Promise(function(succ,fail){
if(如果成功){
succ(res)//成功返回
}else{
fail(res)//失败返回
}
})
.then(成功函数,失败函数)
.catch(处理异常函数)
然后很多人会问:这个东西有什么用啊?
来看看以下的代码
javascript
$.ajax({
url:"url",
success:function(result){
//用返回结果去请求其他接口
$.ajax({
success:function(result){
$.ajax(....)
}
});
},
error:function(res){
}
});
这代码展示的就是以前的一些异步操作做法,需要在回调方法里头继续嵌套代码。
这样导致的问题,嵌套起来一层套一层,可读性不高,代码臃肿。
使用promise后可以把代码变成如下
javascript
new Promise(function(succ,fail){
let res=post(url)//请求业务1接口
succ(res)//成功返回
})
.then(function(res){
let res=post(url,res)//请求业务2接口
console.log("成功返回结果:"+res);
})
.catch(function(err) {
console.log("统一异常处理:"+err);
})
代码变成了顺序格式,自上而下层层执行。
然后很多人会问:那catch那里有什么用呢,是不是多余的?
那我们来看看以下的代码
javascript
function checkAge(obj){
return new Promise(function(succ,fail){
console.log("检测年龄");
if(obj.age>100||obj.age<1){
throw new Error("年龄异常");
}
obj.status=0;//0正常 1超龄
if(obj.age>=35){
obj.status=1;
}
console.log("年龄正常:"+obj.age);
succ(obj)
})
}
function workGroup(obj){
console.log("分配上岗途径");
return new Promise(function(succ,fail){
if(obj.status==1&&obj.age>=65){
throw new Error("享福咯");
}else{
let dict=["自己找","社会帮你找"]
succ(dict[obj.status])
}
})
}
new Promise(function(succ,fail){
let xiaoming={age:66,name:"小明"}
succ(xiaoming)
})
.then(checkAge)
.then(workGroup)
.then(function(res){
console.log("结果:"+res)
})
.catch(function(err){
console.log("异常中心:"+err);
})
//----------------结果---------------
/*
--输入66岁--
检测年龄
年龄正常:66
分配上岗途径
异常中心:Error: 享福咯
--输入35岁--
检测年龄
年龄正常:35
分配上岗途径
结果:社会帮你找
--输入0岁--
检测年龄
异常中心:Error: 年龄异常
*/
这段代码其实是模拟了一个流水线作业的流程
年龄是否正常---是否达到了35岁--社会要求你找工作的途径
显然,这个检测流程,如果按照then(成功,失败)这样去写的话,每个then都要去写各自的失败函数,但实际业务开发中这种错误回调往往只是提供一个错误的信息返回就行。
所以这里的catch起到的作用是:
1.如果你没在then里面写失败的回调方法,则会自动调整到catch逻辑处理
2.catch会捕捉整个调用链里头的所有失败回调or所有抛出来的异常
有任何疑惑可到评论区讨论😀