promise打印顺序

最新推荐文章于 2024-05-06 10:07:28 发布

aabbccQBB

最新推荐文章于 2024-05-06 10:07:28 发布

阅读量1k

点赞数 13

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44307861/article/details/136511332

版权

1    Promise.resolve()
2      .then(() => {
3        console.log(0);
4        return Promise.resolve(4);
5      })
6      .then((res) => {
7        console.log(res);
8      });
9    Promise.resolve()
10      .then(() => {
11        console.log(1);
12      })
13      .then(() => {
14        console.log(2);
15      })
16      .then(() => {
17        console.log(3);
18      })
19      .then(() => {
20        console.log(4);
21      })
22      .then(() => {
23        console.log(5);
24      })
25      .then(() => {
26        console.log(6);
27      });

打印结果：

块引用1：

当我们调用一个Promise.then()方法的时候，要做两件事。

第一件：如果说当前Promise是已完成状态，那么.then内的那个回调函数会被推到微任务队列。

第二件：.then方法会返回一个新的Promise，这个新的Promise的状态取决于这个then内的回调函数的运行过程，没运行，状态为Pending，运行了，是否报错，如果没报错，状态为Fulfilled，否则rejected。

块引用2：

当Promise.then()内返回一个新的Promise时，.then方法返回的Promise的状态跟.then内部的这个Promise的状态是一致的，.then内部的这个Promise的状态是什么样，.then方法返回的Promise的状态就是什么样。

什么时候保持一致呢？

浏览器是这么整的？

两件事：

第一件：把状态一致这件事放到了一个then里边，意思就是说

P4通过一个.then来完成P0 P4.then(() => 完成P0)

第二件：把整个这个任务再放到微队列里

一起来看看怎么执行的？

准备三个标签：

标签1：分析代码的执行过程

标签2：存放微任务队列

标签3：控制台打印

分析代码的执行过程	存放微任务队列	控制台打印
line1:记作pomise1，状态Fulfilled	line2-5:记作打印0
line2-5:返回一个新的Promise，记作P0，当前未运行，状态Pending
line6-8:返回一个新的Promise，记作P4，当前未运行
line9:记作Promise2，状态Fulfilled	line10-12:记作打印1
line10-12:返回一个新的Promise，记作P1，当前未运行，状态Pending
line13-15:返回一个新的Promise，记作P2，当前未运行，状态Pending
line16-18:返回一个新的Promise，记作P3，当前未运行，状态Pending
line19-21:返回一个新的Promise，记作P5，当前未运行，状态Pending
line22-24:返回一个新的Promise，记作P6，当前未运行，状态Pending
代码整个运行完成，准备开始取微队列
		取出微队列中的第一条，line2-5:记作打印0，控制台输出0，这个回调函数返回一个新的已完成的数据为4的Promise,处理过程见上边的块引用2。
	line4: P4.then(() => 完成P0)
		取出微队列中的第二条，line10-12:记作打印1，控制台输出1,P1运行完成，状态Fulfilled,就会把line13-15:返回一个新的Promise，记作P2推入到微队列
	line13-15:记作打印2
		取出微队列中的第三条，line4:P4.then(() => 完成P0)
	() => 完成P0放入微队列
		取出微队列中的第四条，line13-15:记作打印2，控制台输出2,P2运行完成，状态Fulfilled,就会把line16-18:返回一个新的Promise，记作P3推入到微队列
	line16-18:记作打印3
		取出微队列中的第五条，() => 完成P0，line2-5:返回一个新的Promise，记作P0，状态Fulfilled，P0已完成，line6-8:返回一个新的Promise，记作P4，放入微队列
	line6-8:记作打印4
		取出微队列中的第六条，line16-18:记作打印3，控制台输出3,P3运行完成，状态Fulfilled,就会把line19-21:返回一个新的Promise，记作P5推入微队列
	line19-21:记作打印5
		取出微队列中的第七条，line6-8:记作打印4，控制台输出4,P4运行完成，状态Fulfilled
		取出微队列中的第八条，line19-21:记作打印5，控制台输出5,P5运行完成，状态Fulfilled,就会把line22-24:返回一个新的Promise，记作P6推入微队列
	line22-24:记作打印6
		取出微队列中的第九条，line22-24:记作打印6，控制台输出6,P6运行完成，状态Fulfilled，整个过程结束