同步和异步

一、javascript中为什么需要引入异步？

   1.我们知道js是单线程语言，只能同时做一件事。但在遇到需要等待（网络请求，定时任务）不能卡住，所以引入了异步

   2.异步就是为了解决单线程需要等待的问题（如：网络请求，定时任务）

 3.异步是基于回调 callback 函数形式 

二、同步和异步

1.异步：不会阻塞代码执行，

//异步
console.log(100)
setTimeout(()=>{ // 回调函数
    console.log(200)
},1000)
console.log(300)

 代码依次输出： 100  、300 、200

2.同步：会阻塞代码执行，上一行代码没执行完不会往下执行

//同步
console.log(100)
alert(200)
console.log(300)

alert 弹窗不关闭，下一行代码不会执行

三、异步应用场景

　　1.网络请求，如：ajax、图片加载

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

//图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function(){
      console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

　　2. 定时任务，如setTimeout、setInterval

//setTimout
console.log(100)
setTimeout(function(){
      console.log(200)
},1000)
console.log(300)

//setInterval
console.log(100)
setInterval(function(){
     console.log(200)
},1000)
console.log(300)

 四、手写一个用Promise 加载图片

            function loadImg(src){
                return new Promise((resolve,reject)=>{
                    const img = document.createElement('img')
                    img.onload = function(){
                        console.log(img,this)
                        resolve(img)
                    }
                    img.onerror = function(){
                        const error = new Error(`图片加载失败 ${src}`)
                        reject(error)
                    }
                    img.src = src
                   
                })
            }

           // 测试例子

            const url = 'https://assets.cnblogs.com/logo.svg'
            const url2 = 'https://assets.cnblogs.com/logo.svg'
            loadImg(url).then(res=>{
                console.log(res.width) // 150
                return res // 将普通对象做为参数传给下一个then
            }).then(res =>{
                console.log(res.height) //55
                return loadImg(url2) //promise实例，则将promise实例的resolve()返回的参数 做为下一个then函数的参数
            }).then((img2)=>{
                console.log(img2,'uuu')
            }).catch(err =>{
                console.log(err)
            })