Promise 总结(一)回调地狱到 Promise

160 阅读2分钟

这是我参与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)});

codepen.io/ubuntugx/pe…

成功和失败的状态捕捉

成功后的值肯定是程序手动设置的,失败的可能是手动捕捉的原因,或者因为运行异常浏览器抛出的错误。

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);
})

codepen.io/ubuntugx/pe…