持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

前言

分享一道有趣的题目，来检验一下你是否真的完全掌握了promise，希望对大家有所帮助同时欢迎讨论指出问题！

1.题目

给出以下代码，输出的顺序是什么呢？做一下吧，检测一下自己

 const first = () => (new Promise((resolve, reject) => {
            console.log(3);
            let p = new Promise((resolve, reject) => {
                console.log(7);
                setTimeout(() => {
                    console.log(5);
                    resolve(6);
                }, 0)
                resolve(1);
            });
            resolve(2);
            p.then((arg) => { console.log(arg)});
        }));
        first().then((arg) => { console.log(arg)});
  console.log(4);

输出结果是：3，7，4，1，2，5 （resolve(6);无效，因为priomsie一经改变就不再变化）

2.详解

详细解释：

1.第一轮事件循环：js执行机制先执行同步，再执行异步；因此第一轮事件循环，先执行宏任务，主要的是主script，new Promise立即执行。

 const first = () => (new Promise((resolve, reject) => {
            console.log(3);
            let p = new Promise((resolve, reject) => {
                console.log(7);
            });
        }));
      
  console.log(4);

输出：1.Promise 新建后就会立即执行，因此执行new Promise操作，输出 3

2.执行p这个new Promise操作，输出 7

3.执行console.log(4),输出 4

第二轮事件循环：第一轮事件循环结束开始执行第二轮，setTimeout，p的then暂且命名为then1，且first也有then，命名为then2。

const first = () => (new Promise((resolve, reject) => {
           let p = new Promise((resolve, reject) => {
               setTimeout(() => {
                   console.log(5);
                   resolve(6);
               }, 0)
               resolve(1);
           });
           resolve(2);
           p.then((arg) => { console.log(arg)});
       }));
       first().then((arg) => { console.log(arg)})

输出：1.执行setTimeout的回调输出5；resolve(6)不会生效，因为promise 有 3 种状态： pending（进行中）fulfilled（已成功）rejected（已失败），当Promise状态一旦改变就不会再变化了

2.再执行微任务，执行p的then回调，输出1

3.再次执行微任务，执行first的then回调，输出2

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。

快来做一道面试题，检验一下你是否真的完全掌握了promise？

前言

1.题目

2.详解

结束语