ajax面试题四步法,异步基础【面试回顾】

单线程和异步js是单线程语言,同时只能做一件事

浏览器和node已支持js启动进程,如Web Worker

js和DOM渲染共用同一个线程,因为js可修改DOM结构

遇到等待(网络请求,定时任务)不能卡住,所以需要异步

同步会阻塞代码执行,异步不会阻塞代码执行

应用场景——网络请求,如ajax图片加载

定时任务,如setTimeout// 异步 (callback 回调函数)

console.log(100)

setTimeout(() => {

console.log(200)

}, 1000)

console.log(300)

console.log(400)

// 同步

console.log(100)

alert(200)

console.log(300)

Promise//手写promise加载一张图片

function loadImg(src) {

const p = new Promise(

(resolve, reject) => {

const img = document.createElement('img')

img.onload = () => {

resolve(img)

}

img.onerror = () => {

const err = new Error(`图片加载失败 ${src}`)

reject(err)

}

img.src = src

}

)

return p

}

const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'

loadImg(url).then(img => {

console.log(img.width)

return img

}).then(img => {

console.log(img.height)

}).catch(ex => console.error(ex))

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

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

loadImg(url1).then(img1 => {

console.log(img1.width)

return img1 // 普通对象

}).then(img1 => {

console.log(img1.height)

return loadImg(url2) // promise 实例

}).then(img2 => {

console.log(img2.width)

return img2

}).then(img2 => {

console.log(img2.height)

}).catch(ex => console.error(ex))