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

单线程和异步

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