前端面试知识整理——JS基础异步和单线程
题目:
- 同步和异步的区别是什么
- 手写promise加载一张图片
- 前端使用异步的场景有哪些
知识点:
- 单线程和异步
- 应用场景
- callback hell(回调地狱)和Promise
单线程和异步
- JS是单线程语言,只能同时做一件事
- 浏览器和nodejs已支持JS启动进程,如web worker
- JS 和 DOM 渲染共用一个线程,因为JS可修改DOM结构
- 遇到等待(网络请求,定时任务)不能卡住
- 需要异步
- 回调callback函数形式
console.log(100)
setTimeout(function () {
console.log(200)
}, 1000)
console.log(300)
console.log(100)
alert(200)
console.log(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)
})