关于前端:异步基础面试回顾

单线程和异步

• 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))