浅谈Promise以及面试过程

102 阅读2分钟

1.Promise是什么?

Promise,顾名思义:Promise就是承诺函数,主要是对网络请求进行处理的

那为啥不用同步或者ajax去处理呢?

1.如果是同步的话:我们知道网络请求是非常消耗时间的,并且一旦我们使用同步代码进行处理的话,会发生一个事情,
叫做阻塞,出现阻塞后,有可能会导致整个页面整个程序无法运行的状态,这是非常危险的行为
2.用ajax进行处理:会出现另一个问题,如果要处理多次的网络请求,并且请求的关系都是嵌套的话,就很容易出现回
调地狱的问题

2.什么是回调地狱呢?

回调地狱就是:需要通过一个url1从服务器加载一个data1,data1中包括下一个请求url2;需要通过一个url2从服务器加载一个data2,data2中包括下一个请求url3·····,一直这样回调下去就称为回调地狱

$.ajax('url1',(data1)=>{
	$.ajax('url2',(data2)=>{
		$.ajax('url3',(data3)=>{
			$.ajax('url4',(data4)=>{
				$.ajax('url5',(data5)=>{
					console.log(data5);
				})
			})
		})
	})
})

3.Promise的回调地狱

new Promise((res,rej)=>{
	setTimeout(()=>{
		console.log(123);
		console.log(123);
		console.log(123);
		console.log(123);
		console.log(123);
		console.log(123);
		console.log(123);
		setTimeout(()=>{
			console.log(456);
			console.log(456);
			console.log(456);
			console.log(456);
		},1200)
	},1200)
})

4.Promise如何优雅地处理回调地狱

1.Promise是一个类,必须通过new出来

2.Promise( (resolve,reject)=>{} ) 本来Promise参数也是一个函数

3.函数里面有两个参数,一个是成功的回调,一个是失败的回调,resolve和reject这两个参数也都是函数

4.异步代码中调用resolve (),一旦调用resolve( ),就立刻会到then( )中

5.then()的参数也是一个函数,里面做resolve( ),本来处理的事情

6.如果.then( )后面还有异步的话,可以直接再 return 一个 new Promise

			new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve()
				},1200)
			}).then(()=>{
				console.log(123);
				console.log(123);
				console.log(123);
				console.log(123);
				console.log(123);
				console.log(123);
				return new Promise((reslove,reject)=>{
					setTimeout(()=>{
						reslove()
					},1200)
				}).then(()=>{
					console.log(456);
					console.log(456);
					console.log(456);
					console.log(456);
					console.log(456);
					console.log(456);
				})
			})

5.Promise源码

image.png

解释:其实Promise类是一个接口interface,当Promise执行完构造函数的时候,通过constructor来回调resolve,reject

6.Promise传参

            new Promise((resolve,reject)=>{
			setTimeout(()=>{
				resolve("123")
			},1200)
		}).then((data)=>{
			console.log(data);
			})
		})

7.Promise的链式调用

语法:new Promise( ).then( ).then( )

问:为啥不是Promise.resolve( ).then( )呢

答:因为return Promise.resolve(data+"1111")是返回Promise的,就可以Promise( ).then( )

            new Promise((resolve,reject)=>{
			setTimeout(()=>{
				resolve("aaa")
			},1000)
		}).then((data)=>{
			console.log(data);
			return Promise.resolve(data+"1111")
		}).then((data)=>{
				console.log(data);
		})
         

8.Promise的all方法使用

当有多个网络请求要发送时,可以使用Promise.all()方式进行处理

                Promise.all([
			// 请求一
			new Promise((reslove,reject)=>{
				// 模拟网络请求
				setTimeout(()=>{
					reslove("abc")
				},1000)
			}),
			// 请求二
			new Promise((reslove,reject)=>{
				// 模拟网络请求
				setTimeout(()=>{
					reslove("123")
				},1000)
			})
		]).then((results)=>{
			console.log(results);
		})