前端面试题：对promise的理解

优点：可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

缺点：

1. 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
2. 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
3. 当处于Pending状态时，无法得知目前进展到哪一个阶段。

promise内部有三种状态，pedding，fulfilled，rejected：

1. pedding表示程序正在执行但未得到结果，即异步操作没有执行完毕。
2. fulfilled表示程序执行完毕，且执行成功。
3. rejected表示执行完毕但失败；这里的成功和失败都是逻辑意义上的；并非是要报错。
   ​
   promise和回调函数一样，都是要解决数据的传递和消息发送问题，
   promise中的then一般对应成功后的数据处理，catch一般对应失败后的数据处理。

举个怀孕例子如图所示：

script代码：

//先创建变量ispregnant，赋值布尔值，表示是否怀孕
const isPregnant = true;
//创建promise变量，new一个promise
//promise里面实行一个函数，可以传入两个参数，分别是resolve和reject
const promise = new Promise((resolve,reject) => {
	//用if来判断，怀孕了就用resolve表示，孩子他爹为成功的值
	//失败了就用reject表示，老公为失败的值
	if(isPregnant) {
		resolve('孩子他爹');
	}else{
		reject('老公');
	}
});
/*揭露结果,调用函数，先设置成功的返回结果，也就是为then里传入一个函数，
这个函数我们设置了一个参数name，这个name就是前面resolve保留的参数，
再为catch里面传入一个函数，这个函数我们设置了一个参数，也是name，这个name是前面reject保留的参数，最后finally里传入一个函数，传入两人结婚的结果*/
promise
	.then(name => {
		console.log('男人成为了${name}');
	})
	.catch(name => {
		console.log('男人成为了${name}');
	})
	.finally(() => {
		console.log('男人和女人结婚了');
	});

效果：

再举一个例子：
script代码：

		<script type="text/javascript">
			//先给参数赋值最顶部创建的变量
			const imgAddress = 'https://tse1-mm.cn.bing.net/th/id/R-C.c6c03edea530e9caa677c9d17f193a4d?rik=MBgpsjumbTD5eQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fca186d97701674b996264b2d352894a7.jpg&ehk=HunG%2fPF7pUbpcS34cWpNvlS%2faoDPbcaTYL6LFFPQIIM%3d&risl=&pid=ImgRaw&r=0';
			//创建一个变量
			const imgPromise = (url) => {
				//创建代码，进行异步加载
				return new Promise ((resolve,reject) => {
					//创建函数
					const img = new Image();
					//函数接收一个参数
					img.src = url;
					//参数里返回一个promise
					img.onload = () => {
						//promise的一个结果：resolve，把参数img填上去
						resolve(img);
					};
					img.onerror = () => {
						//promise的一个结果：reject，把参数填上去
						reject(new Error('图片有误'));
					};
				});
			};
			//创建一个变量img，然后把参数url赋值给图片的src属性
			imgPromise(imgAddress)
				.then(img => {
					//加载图片时使用resolve这个函数，并且把img里的信息保存起来
					document.body.appendChild(img);
				})
				.catch(err => {
					//如果图片信息有误则需要reject这个函数，catch设置提示信息
					document.body.innerHTML = err;
				});
				
				/*步骤1.先给参数赋值最顶部创建的变量
				2.函数里面执行的是promise，因此用then来执行一下*/
		</script>

效果：