前端各种原理和源码的学习

最新推荐文章于 2024-05-12 07:21:47 发布

是与或非

最新推荐文章于 2024-05-12 07:21:47 发布

阅读量555

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_42850692/article/details/106716334

版权

关于异步

Promise和nextTick是任务。。谁先入队谁先执行？？
详解：解读setTimeout, promise.then, process.nextTick, setImmediate的执行顺序
https://www.cnblogs.com/jesse131/p/11708233.html

Promise 使用了作业队列。这种方式会尽快地执行异步函数的结果，而不是放在调用堆栈的末尾。而setTimeout则是放入消息队列；
优先级总结：主任务队列 > 作业队列 > 消息队列
注：在每次执行队列中的任务时，都会先检查是否存在有比自己优先级更高的任务

在当前函数结束之前 resolve 的 Promise 会在当前函数之后被立即执行。
http://nodejs.cn/learn/the-nodejs-event-loop

promise().then、nextTick()、setTimeout()谁先执行

A: promise().then 优先于 nextTick() 优先于 setTimeout()
原因：执行的优先级有区别。
微任务：（process.nextTick, Promise.then，Object.observe，MutationObserver）
宏任务：script (整体代码)，setTimeout, setInterval, setImmediate, I/O, UI renderin；
而微任务优于宏任务执行，当一个宏任务执行完毕后会将当前的微任务队列清空。

console.log('1');
setTimeout(() => {console.log('2')}, 0)
this.$nextTick(() => {
	console.log('3');
})
new Promise((resolve) => {
	console.log('4');
	resolve();
}).then(() => {
	console.log('5')
})
console.log('6');
// 1 4 6 3 5 2

console.log('1');
setTimeout(() => {console.log('2')}, 0)
new Promise((resolve) => {
	console.log('4');
	resolve();
}).then(() => {
	console.log('5')
})
this.$nextTick(() => {
	console.log('3');
})
console.log('6');
// 1 4 6 5 3 2

promise实现原理
promise是保存异步执行的结果；它本身的异步性是因为Promise.prototype.then和Promise.prototype.catch；then方法返回的是(新的)promise对象；在这个过程中由引擎隐式完成；而 Promise 是一个 Job Queue；所以在只是Promise调用的时候，其实是同步的，到用then方法时返回一个新的Promise，这时作业队列就会加入新的任务，而console.log(‘five’)是主任务队列，所以将会先执行console.log(‘five’)

	promiseTest() {
		console.log('one')
		const proData = new Promise((res, rej) => {
			console.log('two')
			res('异步出')
			// rej('我错了')
		})
		console.log('three')
		console.log(proData)
		proData.then(res => {
			console.log('four')
		}).catch(req => {
			console.log(req)
		})
		console.log('five')
	}
	// one  two  three  five  'test001.html:68 res是 异步出'  four

promise实现：https://www.jianshu.com/p/43de678e918a