Promise解决回调地狱-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_zy_com/article/details/105126072

Promise基本上是面试面试必问点之一。为什么能在面试这么高频的呢？

什么是Promise

它的出现是为了更好地解决JavaScript中异步编程的问题，传统的异步编程最大的特点就是大量的回调嵌套，被称为回调地狱，一旦嵌套次数过多，就很容易使我们的代码难以理解和维护。而promise则可以让我们通过链式调用的方法去调用回调嵌套的问题，使我们的代码更容易理解和辩护，而且promise还增加了许多有用的特性。

//传统的回调地狱
		const btn1 = document.getElementById("btn1");
		const btn2 = document.getElementById("btn2");
		const btn3 = document.getElementById("btn3");
		btn1.addEventListener("click", function () {
			btn2.addEventListener("click",function(){
				btn3.addEventListener("click",function(){
					alert("hello world")
				})
			})
		})

回调地狱的缺点：

1.代码臃肿
2.可读性差
3.耦合度过度，可维护性差
4.代码复用性差
5.容易出错，并且只能在回调里处理异常
promise的出现就轻松的解决类似问题

es6将程序分为了三种状态 pending resolved rejected
pending：挂起（等待）处于未决阶段，表示事情还是在挂起，最后的结果没有出来
resolved：已处理处于已决阶段，表示整个事情已经出现结果，并且可以按照正常的逻辑进行下去的结果,这个过程，可能会传递一些数据,后续处理表示为 thenable
rejected：已拒绝处于已决阶段，表示整个事情已经出现结果，并且是一个无法按照正常逻辑进行下去的结果,这个过程，可能会传递一些数据，这些数据一般为错误信息,后续处理表示为 catchable

//1.因为promise是一个构造函数，所以需要使用new操作符来创建promise
//resolve()//推向完成阶段的成功转态
//reject()//推向了一个失败的状态
const pro = new Promise((resolve,reject) => {
		console.log('promise')
//2.构造含糊promise的参数是一个函数，这个函数有两个参数resolve和reject，它们分别是两个函数，这两个函数的作用就是将promise的转态从pending(等待)转换为resolved(已成功)或者从pending(等待)装换为rejected(以失败)，resolved，rejected都是已决阶段
		setTimeout( () => {
			if(Math.random() < 0.1){
				resolve(true)
			}else{
				resolve(false)
			}
		},1000)
	})
//3.创建后promise有一些方法，then和catch。也可以人为的在promise函数上添加一些自己需求的方法，方便每一个promise对象使用
	pro.then(data => {
		console.log('通过resolve推过来的状态')
		console.log(data)
	},err => {
		console.log("通过reject推过来的状态")
		console.log(err)
	})
//4.注册一个后续处理函数，当promise为resolved转态是运行该函数，当promise为rejected状态是运行该函数的第二个参数

注意点：

1.未决阶段的处理函数是同步的，会立即执行
2.thenable和catchable函数是异步的，就算会立即执行，也是会加入等待队列中，加入微队列
3.pro.then可以只添加thenable函数,pro.catch可以单独添加catchable函数
4.在未决阶段的处理函数中，如果发生未补获的错误，会将状态推向rejected，并且会被catchable捕获
5.一旦状态推向了已决阶段，无法再去做任何的改变