这是我参与2022首次更文挑战的第12天,活动详情查看:2022首次更文挑战
hi 我是小十七_,之前总结过一些 Promise 的基础知识,这是第一篇 Promise 总结(一)回调函数到 Promise,分享给大家~
回调地狱
回调地狱不仅仅是很多回调函数嵌套带来的代码可读性的问题(倒三角形),还有最大的控制反转问题,比如说我们依赖第三方库的支付系统:
analyse.buySomething(price, function(){
// 弹出支付成功框
})
在第三方支付分析工具的回调函数中,写购买的语句,调用回调函数的决定权在第三方工具手中,可能会调用多次(支付多次),提前调用,延后调用等等...我们需要在回调函数中增加很多判断,保证支付成功。
Promise
- 我们只需要知道一个异步的任务什么时候结束,一个未来的状态,和中间执行的时间无关。
- 不需要关注foo内部如何实现,只需要监听它的完成状态
- Promise 一旦决议,就是一个不可变的值,不会因为多次查看而被修改。
- 判断一个对象是不是 Promise 的实例,判断他有没有函数类型的 then 属性(鸭子类型检测)
实现两个异步加载的数,相加
var sum = function(PromiseX, PromiseY){
// 接收 Promise 实例的数组,当两个 Promise 都执行完后,执行 .then
// .then 中传入函数的参数也是数组,每一个 Promise resolve 后的值
// .then 生成了一个新的 Promise 实例
return Promise.all([PromiseX, PromiseY]).then(function(res){
return res[0] + res[1];
})
}
// 返回第一个异步加载数,Promise实例
var promiseX = function(){
return new Promise(function(resolve, reject){
resolve(2);
})
}
// 返回第二个异步加载数,Promise实例
var promiseY = function(){
return new Promise(function(resolve, reject){
resolve(3);
})
}
// sum 最后返回了一个 Promise 实例,.then 参数是return的结果?
sum(promiseX(), promiseY()).then(function(res){console.log(res)});
成功和失败的状态捕捉
成功后的值肯定是程序手动设置的,失败的可能是手动捕捉的原因,或者因为运行异常浏览器抛出的错误。
function handleReject(){
return new Promise(function(resolve, reject){
var random = Math.random();
if(random>0.5){
resolve(1);
}else{
reject("too bigger");
}
})
}
handleReject().then(function(res){
// 成功
console.log(res);
}, function(err){
// 失败,
console.log(err);
})