前端面试知识整理——JS基础异步和单线程

前端面试知识整理——JS基础异步和单线程

题目：

• 同步和异步的区别是什么
• 手写promise加载一张图片
• 前端使用异步的场景有哪些

知识点：

• 单线程和异步
• 应用场景
• callback hell(回调地狱)和Promise

单线程和异步

• JS是单线程语言，只能同时做一件事
• 浏览器和nodejs已支持JS启动进程，如web worker
• JS 和 DOM 渲染共用一个线程，因为JS可修改DOM结构
• 遇到等待（网络请求，定时任务）不能卡住
• 需要异步
• 回调callback函数形式

      //异步 callback 回调函数
      console.log(100)
      setTimeout(function () {
        console.log(200)
      }, 1000)
      console.log(300) //100 300 200

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

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

应用场景

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

手写promise加载一张图片

const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'

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

loadImg(url1)
  .then((img1) => {
    console.log(img1.width)
    return loadImg(url2)
  })
  .then((img2) => {
    console.log(img2.width)
  })
  .catch((err) => {
    console.log(err)
  })