最近的国际新闻大事件,榜单优化,西安医疗网站建设,如何用ae做模板下载网站1.请描述Event loop#xff08;事件循环#xff09;的机制。 JS是单线程的#xff0c;异步需要基于毁掉来实现#xff0c;event loop 就是异步回调的实现原理。 同步代码#xff0c;一行一行放在Call Stack执行#xff0c;遇到异步任务#xff0c;标记一下让其他线程去处…
1.请描述Event loop事件循环的机制。 JS是单线程的异步需要基于毁掉来实现event loop 就是异步回调的实现原理。 同步代码一行一行放在Call Stack执行遇到异步任务标记一下让其他线程去处理定时网络请求等其他线程处理完毕就放到callback Queue, 如果Call stack清空即同步代码执行完开始执行当前的微任务和微任务引发的微任务执行完毕微任务队列然后尝试进行DOM渲染渲染结束Event loop开始工作轮询查找Callback Queue 如果有则移动到Call Stack执行然后继续重复上述步骤永动机一样。
2.什么是宏任务和微任务两者有什么区别 宏任务 setTimeout、setInterval、Ajax、DOM事件 微任务 Promise、 async/await、 微任务执行时机比宏任务要早微任务在DOM渲染前触发宏任务在DOM渲染后出触发。微任务是ES6语法规定宏任务是由浏览器规定的 3.Promise 有哪三种状态如何变化 三种状态pending\resolved\rejected pending -resolved或pending - rejected,变化不可逆。 resolved 会触发then回调rejected会触发catch回调只要回调里面没有报错无论是then或catch返回的都是resolved状态报错时会返回rejected状态。 4.async/await Promise的关系 执行async函数返回的是一个Promise对象await相当于Promise的then; try…catch可捕获异常代替了Promise的catch。await后边的内容都可以当作异步回调的内容。
5.手写Promise
初始化异步调用then链式调用API、resolve、 reject 、all、 race、
class MyPromise {constructor(executor) {this.state pending;this.value undefined;this.onResolveCallbacks [];this.onRejectCallbacks [];const resolve (value) {if (this.state pending) {this.state fulfilled;this.value value;this.onResolveCallbacks.forEach((callback) callback(this.value));}};const reject (reason) {if (this.state pending) {this.state rejected;this.value reason;this.onRejectCallbacks.forEach((callback) callback(this.value));}};try {executor(resolve, reject);} catch (error) {reject(error);}}then(onResolve, onReject) {return new MyPromise((resolve, reject) {if (this.state fulfilled) {try {const result onResolve(this.value);resolve(result);} catch (error) {reject(error);}} else if (this.state rejected) {try {const result onReject(this.value);resolve(result);} catch (error) {reject(error);}} else {this.onResolveCallbacks.push((value) {try {const result onResolve(value);resolve(result);} catch (error) {reject(error);}});this.onRejectCallbacks.push((reason) {try {const result onReject(reason);resolve(result);} catch (error) {reject(error);}});}});}catch(onReject) {return this.then(null, onReject);}
}
