【前端面试指南】JS-4-异步和单线程

1. 异步

   1. 单线程和异步
      1. JS是单线程语言，只能同时做一件事。因为JS可修改DOM结构，JS和DOM渲染共用同一个线程，。
      2. 遇到等待(网络请求，定时任务)不能卡住，所以需要异步。
      3. 基于callback函数形式实现异步
   2. 异步和同步

   //异步
   console.log(100)
   setTimeout(function () {
       console.log(200)
   }, 1000)
   console.log(300)
   

   //同步
   console.log(100)
   alert(200)
   console.log(300)
   

   1. 异步和同步的区别

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

2. 前端使用异步的应用场景有哪些？

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

3. 回调地狱 callback hell 和 Promise

   1. Promise 用串联的方式解决回调地狱问题

4. 笔试题

   1. setTimeout 笔试题

      // 请问 1 2 3 4 5 的打印顺序
      console.log(1)
      setTimeout(
          function () { console.log(2) }
          , 1000)
      console.log(3)
      setTimeout(
          function () { console.log(4) }
          , 0)
      console.log(5)
      //ans: 1 3 5 4 2 
      

   2. 手写Promise加载二张图片

      url1 = 'http://wx4.sinaimg.cn/large/44f2ef1bgy1gfn6zsqoi4j20u00humz8.jpg'
      url2 = 'http://wx1.sinaimg.cn/large/44f2ef1bgy1gfnkprdpmyj20u01400wx.jpg'
      
      function loading (src) {
          return new Promise(
              (resovle, reject) => {
                  const img = document.createElement('img')
                  img.onload = () => {
                      resovle(img)
                  }
                  img.onerror = () => {
                      reject(new Error('图片加载失败'))
                  }
                  img.src = src
      
              }
          )
      
      }
      loading(url1).then(img1 => {
          console.log(img1.width)
          return img1 // 返回普通对象
      }).then(img1 => {
          console.log(img1.height)
          return loading(url2) //返回 promise 实例
      }).then(img2 => {
          console.log(img2.width)
      }).catch(ex => console.error(ex))
      
      

      3. Promise.all、Promise.race 分别怎么用？

         1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
         2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

      4. async/await 怎么用，如何捕获异常？

         https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

         // 捕获异常
         async function f3() {
           try {
             var z = await Promise.reject(30);
           } catch (e) {
             console.log(e); // 30
           }
         }
         f3();