前端面试之异步、单线程

一、异步和同步的区别

同步：
JS是单线程语言，只能同时做一件事儿。js任务需要排队顺序执行，如果一个任务时间过长，后边的任务也会等着。假如，我们在请求一个网址时，图片加载很慢，网页总不能一直卡不出来，这个时候就可以用异步来解决了。

异步：
异步就是由单线程这个背景而来的，解决了单线程等待的这个问题，异步的特点不会阻塞后面代码的执行。也就是请求处理过程中，你不能闲着，会产生异步的请求，回头再处理，然后继续执行下面的请求

异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助

二、前端使用异步的场景有哪些

网络请求，如ajax图片加载

//ajax
    console.log('satrt')
    $.get('./data1.json',function(data1){
        console.log(data1)
    })
    console.log('end')
    

定时任务，如setTimeout

// 异步执行(callback回调函数) Promise解决了callback异步的问题
    console.log(100)
    setTimeout(()=>{
        console.log(200)
    },1000)
    console.log(300) 
     // 100>300>200

三、使用Promise加载一张图片

function loadImg(src2) {
    return new Promise(
        //参数 resolve reject 均是函数
        (resolve,reject)=>{
            const img1 = document.createElement('image')
            img1.src = src2
            img1.onload=()=>{
                resolve(img1)
            }
            img1.onerror=()=>{
                const err = new Error(`图片加载失败！${src}`)
                reject(err)
            }
            
        }
    )
}
const url1 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
const url2 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
loadImg(url1).then(img=>{
    console.log(img.width)
    return img
}).then(img=>{
    console.log(img.height)
    return loadImg(url2)
}).then(img2=>{
    console.log(img2.width)
    return img2
}).then(img2=>{
    console.log(img2.height)
})
.catch(err=>{
    console.log(err)
})