请教一道js题

Question

在一个网站上看到的，看了整篇文章，还是不知道这个的结果时怎么出来的，真的好菜，特来向大家请教下怎么来的（麻烦详细点，比较笨。）

console.log(1);
new Promise(function (resolve, reject){
    reject(true);
    window.setTimeout(function (){
        resolve(false);
    }, 0);
}).then(function(){
    console.log(2);
}, function(){
    console.log(3);
});
console.log(4);

顺便帮作者打波广告，文章原链接：链接描述

Answer 1

这里涉及到 微任务和Promise的唯一状态（状态一旦确定，不可更改）

首先执行console.log(1);
接着进入Promise，执行reject(true)，这时，reject对应的回调被送入微任务，Promise的状态已经确定(reject)
发现setTimeout，放入异步队列中
跳出Promise，执行console.log(4);
这时执行栈为空，检查微任务队列，执行console.log(3);
这时微任务队列为空，发现异步队列有任务可以触发，执行setTimeout内部的resolve(false);，但Promise的状态唯一性，因此被忽略。

Answer 2

答案：1 4 3
过程：

1. 首先整段js从上到下执行，遇到 console.log(1) 输出了1；
2. 遇到了 new Promise(function(resolve,reject){})。继续往里看，遇到了 reject(true)。此时的 promise的状态由pending变成了rejected。再往下看，是一个setTimeout，setTimeout方法内部的操作将会被丢到下一个宏任务的队列中执行，即使时间为0。
3. 执行完function内部看.then()了。.then()内部的操作将丢到微任务队列里面等待执行。
4. 继续向下看，遇到console.log(4) 输出4
5. 此时这个宏任务已经执行完啦，开始执行微任务。微任务队列中有个 .then(), .then()方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的。此时的promise的状态是rejected，于是走的是第二个function(){}，也就是console.log(3),于是便输出了3
6. 微任务队列也执行完了，开始执行下一轮的宏任务，也就是setTimeout内部的操作，但是此时的resolve(false)并不能改变promise的状态，因为promise的状态一旦改变了就一直保持这个状态不会再发生变化了。

Answer 3

上面大佬们解释分析的很具体了。

你需要明白的就是js的eventloop和promise的状态特性。

eventloop主要就是各个taskqueue任务队列，定时器有定时器的任务队列，promise有promise的微任务队列。

主要明白上面那句话就行。

至于每个循环中，确实是会检测各个队列，但是不同环境的js，比如chrome和node，具体实现上还是有差异的。
上面那个例子，在node和chrome中结果是一样的。但是我当时看这个知识点时候，自己写的是下面这个例子。。

setTimeout(function () {
  console.log('a');
  Promise.resolve(1).then(()=>{
    console.log('b');
    Promise.resolve(2).then(()=>{
      console.log('c');
    })
  });
},0);
Promise.resolve(3).then(()=>{
  console.log('d');
  Promise.resolve(4).then(()=>{
    console.log('e');
  })
});
setTimeout(function () {
  console.log('f');
  Promise.resolve(5).then(()=>{
    console.log('g')
  })
},0);

你可以在chrome和node中分别跑下，会发现结果是不一样的。也就是事件循环细节上，不同环境实现还是有差异的。但是任务队列的概念基本没差。

Answer 4

先走同步代码，再走异步代码
同步：

console.log(1);
new Promise(function (resolve, reject){
    reject(true);
    window.setTimeout(function (){
        ...
    }, 0);
})
console.log(4);

因此可以确定先输出1，4。
异步代码共有：

1. 因reject(true);而触发的console.log(3);
2. setTimeout中的resolve(false);
3. 以及因resolve(false);而触发的console.log(2);

第一第二步必走，因此可以确定3。
第三步走不到，因为Promise的状态已经变成rejected了，无法再次更改，所以无法触发到console.log(2);

Answer 5

输出顺序1,4,3
1和4容易理解
3解释一下

Promise的值只能变更一次，后面的reject/resolve都无效，在例子中

 reject(true);
window.setTimeout(function (){
        resolve(false);
    }, 0);

reject先执行，因为它是同步代码，而window.setTimeout是异步的

Answer 6

console.log(1);
        new Promise(function (resolve, reject){
            reject(true);
            window.setTimeout(function (){
                resolve(false);
            }, 0);
        }).then(function(){
            console.log(2);
        }).catch(function(){
            console.log(3);
        });
        console.log(4);

大佬们说的都很对，一开始没明白，换成这种形式就好理解了,其实是执行了catch()