JS 面试题常见知识点（四）—— 异步

1. 异步和同步的区别

   • 基于JS是单线程语言
   • 异步不会阻塞代码执行
   • 同步会阻塞代码执行

2. 应用场景

   • 网络请求，如 ajax 图片加载
   • 定时任务，如 setTimeout

3. 手写 Peomise 加载一张图片

   function loadImg(src) {
       return new Promise(
           (resolve, reject) => {
               const img = document.createElement('img');
               img.onload = () => {
                   resolve(img);
               }
               img.onerror = () => {
                   reject(new Error('图片加载失败'));
               }
               img.src = src;
           }
       )
   }
   

4. event loop（事件循环/事件轮询）是什么？

   • JS 是单线程运行的
   • 异步要基于回调来实现
   • event loop 就是异步回调的实现机制

5. JS 如何执行？

   • 从前到后，一行一行执行
   • 如果某一行执行报错，则停止下面的代码执行
   • 先把同步代码执行完，再执行异步

6. Promise

   • 三种状态，状态的表现和变化：pending -> resolved（触发 then 回调），pending -> rejected（触发catch回调）
   • then 和 catch 对状态的影响：无论是 then 还是 catch 只要没有报错，就会返回 resolved 状态的 Promise，有报错返回 rejected 状态的 Promise

7. 会输出什么？

   // 第一题
   Promise.resolve().then(() => {
       console.log(1)
   }).catch(() => {
       console.log(2)
   }).then(() => {
       console.log(3)
   })
   // 1 3
   
   // 第二题
   Promise.resolve().then(() => {
       console.log(1)
       throw new Error('erro1')
   }).catch(() => {
       console.log(2)
   }).then(() => {
       console.log(3)
   })
   // 1 2 3
   
   // 第三题
   Promise.resolve().then(() => {
       console.log(1)
       throw new Error('erro1')
   }).catch(() => {
       console.log(2)
   }).catch(() => { // 注意这里是 catch
       console.log(3)
   })
   // 1 2
   

8. async/await 和 Promise 的关系

   • 执行 async 函数，返回的是 Promise 对象
   • await 相当于 Promise 的 then
   • try catch 可捕获异常，代替了 Promise 的 catch

9. 宏任务和微任务

   • 宏任务：setTimeout，setInterval, Ajax, DOM事件；
   • 微任务：Promise async/await
   • 微任务执行时机比宏任务要早
   • 微任务DOM 渲染前触发
   • 宏任务DOM 渲染后触发
   • 微任务是 ES6 语法规定的
   • 宏任务是浏览器规定的