前端面试题:对promise的理解

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

缺点:

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

promise内部有三种状态,pedding,fulfilled,rejected:

  1. pedding表示程序正在执行但未得到结果,即异步操作没有执行完毕。
  2. fulfilled表示程序执行完毕,且执行成功。
  3. rejected表示执行完毕但失败;这里的成功和失败都是逻辑意义上的;并非是要报错。

    promise和回调函数一样,都是要解决数据的传递和消息发送问题,
    promise中的then一般对应成功后的数据处理,catch一般对应失败后的数据处理。

举个怀孕例子如图所示:
前端面试题:对promise的理解_第1张图片
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('男人和女人结婚了');
	});

效果:
前端面试题:对promise的理解_第2张图片

再举一个例子:
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>


效果:
前端面试题:对promise的理解_第3张图片

你可能感兴趣的