江西网站开发软件公司网页设计实训报告结束语

我们在处理这些题目之前首先要明白事件循环的逻辑是什么：

我们处理事件的时候的顺序是

执行同步代码（放在主线程）。

遇到异步任务（如 setTimeout、Promise、fetch），将它交给 Web APIs 处理。同步代码执行完毕后，检查任务队列：

微任务队列（Microtask Queue）：执行 Promise.then()、queueMicrotask()、MutationObserver。

宏任务队列（Macrotask Queue）：执行 setTimeout、setInterval、setImmediate（Node.js）、I/O 任务等。

先执行所有微任务，再执行宏任务，然后进入下一个循环。

还有
我们需要知道then这个的触发条件：

then触发的条件有两个：

一个是在宏任务执行完之后再进行执行，另一个就是Promise的状态发生改变。

好的我们接下来来分析这部分的题目：

1.then的作用
 

const promise = new Promise((resolve, reject) => {console.log(1);console.log(2);
});
promise.then(() => {console.log(3);
});
console.log(4);

输出结果：

1 
2 
4

好的，我们来解释为什么，套我们的公式。
先处理同步，输出了1 2 4 接下来检查异步队列，里面有then而且他还是微任务，但是因为我们Promise的状态没有发生改变所以没有输出结果，我们promise的状态呢就是Panding。

2.异步事件循环1

const promise1 = new Promise((resolve, reject) => {console.log('promise1')resolve('resolve1')
})
const promise2 = promise1.then(res => {console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

输出结果：

promise1
1 Promise{<resolved>: resolve1}
2 Promise{<pending>}
resolve1

好的，我们依旧按照我们的公式来解决这道异步，首先处理同步console.log('promise1')接下来处理console.log('1', promise1); console.log('2', promise2);

现在看一下promise1和promise2的状态，1的状态因为resolve语句的出现改变了状态为resolve 2语句的状态没有发生改变所以一直处于Panding状态

输出了promise1  1 Promise{<resolved>: resolve1}  2 Promise{<pending>}

接下来处理异步：

异步队列里面现在有then，没有其他任务，宏任务没有直接执行微任务then，并且promsie的状态也发生了改变，所以输出promise的状态resolve1

3.异步事件循环2

const promise = new Promise((resolve, reject) => {console.log(1);setTimeout(() => {console.log("timerStart");resolve("success");console.log("timerEnd");}, 0);console.log(2);
});
promise.then((res) => {console.log(res);
});
console.log(4);

输出结果：

1
2
4
timerStart
timerEnd
success

我们来解释这个代码执行顺序：

1.同步：console.log(1); console.log(2);console.log(4);

2.异步：微任务：没有  宏任务：setTimeout()

3.执行宏任务：console.log("timerStart"); resolve("success"); console.log("timerEnd");

4.执行结束之后，异步队列里：微任务：then宏任务没有了

5.输出结果：success

4.  异步事件循环3

Promise.resolve().then(() => {console.log('promise1');const timer2 = setTimeout(() => {console.log('timer2')}, 0)
});
const timer1 = setTimeout(() => {console.log('timer1')Promise.resolve().then(() => {console.log('promise2')})
}, 0)
console.log('start');

   输出结果：

start
promise1
timer1
promise2
timer2

这道题目的思路是：

1.同步任务 处理代码console.log('start');

2.现在异步队列里有：微任务：Promise.resolve().then 宏任务：const timer1 = setTimeout

先处理微任务，得到的结果是 console.log('promise1');和把 const timer2 = setTimeout放到宏任务队列里。

再处理宏任务，得到的结果是console.log('timer1')和把 Promise.resolve().then放到微任务队列里面
3.第三轮处理：我们现在异步队列里面有的是，微任务： Promise.resolve().then宏任务： const timer2 = setTimeout

执行的结果是console.log('promise2')以及console.log('timer2')。

5.Promise的状态发生改变之后就不会再改变了

const promise = new Promise((resolve, reject) => {resolve('success1');reject('error');resolve('success2');
});
promise.then((res) => {console.log('then:', res);
}).catch((err) => {console.log('catch:', err);
})

输出结果：

then：success1

这个题目考察的就是Promise的状态在发生变化之后，就不会再发生变化。开始状态由pending变为resolve，说明已经变为已完成状态，下面的两个状态的就不会再执行，同时下面的catch也不会捕获到错误。        

6.then的参数参数穿透

Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)

输出结果：
 

1
状态为：Promise {<fulfilled>: undefined}

Promise.resolve方法的参数如果是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为resolved，Promise.resolve方法的参数，会同时传给回调函数。

then方法接受的参数是函数，而如果传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会传递下面。

“你们幸福就好啦” 

---