JS基础-更多关于异步的问题

JS基础-更多关于异步的问题

1. DOM 事件和event loop

JS是单线程的

异步（setTimeout, ajax）使用回调，基于event loop

DOM 事件也使用回调，基于event loop

event loop过程

• 同步代码，一行一行放到Call Stack执行

• 遇到异步，会先记录下，等待时机(定时、网络请求等)

• 时机到了，就移动到Callback Queue

• 如果Call Stack为空(同步代码执行完)Event loop开始工作

• 轮询查找Callback Queue,如果有则移动到Call Stack执行

• 然后继续轮询查找

promise的三种状态

• pending-待定、resolved-成功、rejected-失败

• pending——》resolved 或 pending——》rejected

• 变化不可逆，状态一旦转换不可改变 pending状态，不会触发then和catch

• resolved状态，会触发后续的then回调函数 rejected状态，会触发后续的catch回调函数

• .then正常返回resolved，里面由报错则返回rejected

• .catch正常返回resolved，里面由报错则返回rejected

async 与 promise 的区别

async/await是基于promise实现的，他不能用于普通的回调函数
async/await使得异步代码看起来像同步代码
async/await与Promise一样，是非阻塞的。

   不同：

• 函数前面多了一个async关键字。await关键字只能用在async定义的函数内。async函数会引式返回一个promise,改promise的resolve值就是函数return的值。

• 简洁：使用async和await明显节约了不少代码，不需要.then,不需要写匿名函数处理promise的resolve的值，不需要定义多余的data变量，还避免了嵌套代码。

• async/await让try/catch 可以同时处理同步和异步错误。try/catch不能处理JSON.parse的错误，因为他在promise中。此时需要.catch，这样的错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂