异步

相关知识点

单线程和异步

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

应用场景

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

//ajax
console.log('seart')
$.get('./data.json',function(data){
    console.log(data)
})
console.log('end')
// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function(){
    console.log('loaded')
}
img.src = './xxx.png'
console.log('end')

题目

1.同步和异步的区别是什么？

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

2.手写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))