欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于promise的一点小思考

程序员文章站 2022-07-13 10:51:24
...

问题

用了很久的promisele ,今天居然被一个小问题难倒了,先上代码,观察他们的执行顺序

问题代码

var p1 = new Promise(function(resloved, rejected){
		setTimeout(function(){
			resloved("success 111")
		}, 3000)
	})


var p2 = new Promise(function(resloved, rejected){
		setTimeout(function(){
			resloved("success 222")
		}, 2000)
	})

p1.then(function(data){
	console.log(data)
	return p2
})
.then(function(data){
	console.log(data)
})

代码执行后,发现上述代码等了两个定时器都执行完成才给我一次性打印值,跟我想象中的好像不一样,不是说好的同步执行吗?怎么又是异步了!

success 111
success 222

再来一串常规代码测试一下

好吧,不知道原因!然后我又用一下常用的写法调用了一下

var pp1 = function (){
	return new Promise(function(resloved, rejected){
		setTimeout(function(){
			resloved("success 111")
		}, 3000)
	})
}

var pp2 = function (){
	return new Promise(function(resloved, rejected){
		setTimeout(function(){
			resloved("success 222")
		}, 2000)
	})
}

pp1().then(function(data){
	console.log(data)
	return pp2()
})
.then(function(data){
	console.log(data)
})

这次就是按顺序执行了定时器

success 111
success 222

寻找原因

这是什么原因?别的先不说,先打印一下再说!了解一段程序做了什么最好的办法就是,看它执行后发生了什么!

var p1 = new Promise(function(resloved, rejected){
		setTimeout(function(){
			resloved("success 111")
		}, 3000)
	})
	
var pp1 = function () {
	return new Promise(function(resloved, rejected){
		setTimeout(function(){
			resloved("success 111")
		}, 3000)
	})
}

console.log(p1)
console.log(pp1)

关于promise的一点小思考

原因之一

p1执行后,返回的是一个实例化完成的对象,而pp1返回的是一段未执行的代码!当一个promise对象实例化完成时,promise对象里边的代码也就开始进入pending状态了,p1和p2这两个promise对象显然都进入了pending,pending是什么意思?
关于promise的一点小思考
是的,没错,是待执行!那么这两个promise里边的setTimeout都同时进入了待执行状态!

原因之二

那么第二个问题出现了,为什么then没有及时执行?
对此我百度了一番!找到了以下大佬的解释,具体详细请跳入传送门
浅析setTimeout与Promise
简而言之,setTimeout是js里边的宏任务,promise是js里边的微任务,当他们同时存在的时候,所有的宏任务优先执行,微任务靠后,所以就出现了,pending状态的setTimeout在程序调用时就开始同时异步执行,等所有的setTimeout执行完成后,then才开始执行!
但是我们的pp1函数返回的并不是promise实例对象,里边的定时器是一个个慢慢的进入pending状态,所以也就按顺序执行了!

相关标签: js语法