（七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】

提问

• 同步和异步的区别是什么
• 手写用Promise加载一张图片
• 前端使用的异步的场景有哪些

单线程

• JS是单线程语言，只能同时做一件事
• 浏览器和NodeJs已支持JS启动进程，如Web Worker
• JS和DOM渲染共用同一个线程，因为JS可修改DOM结构
• 遇到等待（网络请求，定时任务）不能卡住
• 同步会阻塞代码的执行，所以需要异步，解决单线程等待的问题，不会阻塞后面代码的执行
• 回调callback函数形式，setTimeout回调就是异步

// 异步 （callback 回调函数）
 console.log(1)
 setTimeout(function(){
     console.log(2)
 }, 1000)
 console.log(3)
  setTimeout(function(){
     console.log(4)
 }, 0)
 console.log(5)
 //1，3，5，4，2

// 同步，alert点击确定之后才会输出300
console.log(100)
alert(200)
console.log(300)

应用场景

• 网络请求，如ajax、图片加载img.onload
• 定时任务，如setTimeout、setInterval

callback hell和promise

• callback hell是回调嵌套的形式
• promise实现非嵌套的形式，管道串联的形式，解决callback hell问题，callback嵌套问题

//callback hell
//获取第一份数据
$.get(url1,(data1) => {
	console.log(data1)
	//获取第二份数据
	$.get(url2,(data2) => {
		console.log(data2)
	})
	//获取第三份数据
	$.get(url3,(data3) => {
		console.log(data3)
		//还可能获取更多的数据
	})
})
//Promise
function getData(url){
	return new Promise((resolve, reject) => {
		$.ajax({
			url,
			success(data) {
				resolve(data)
			},
			error(err) {
				reject(err)
			}
		})
	})
}
const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'
getData(url1).then(data1 => {
	console.log(data1)
	return getData(url2)
}).then(data2 => {
	console.log(data2)
	return getData(url3)
}).then(data3 => {
	console.log(data3)
}).catch(err => console.error(err))

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