JS基础知识 - 单线程、异步和同步

1、异步与同步的区别

• 基于 JS 单线程的机制
• 异步不会阻塞代码执行
• 同步会阻塞代码执行

2、异步的应用场景

• 网络请求：如 ajax、图片加载
• 定时任务：setTimeout、setInterval

3、理解ES6的 Promise，解决的是 callback hell（回调地狱）的问题

4、手写 Promise 加载一张图片

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

const url1 = "https://avatar.csdnimg.cn/0/9/E/1_qq_24917475_1559180524.jpg";
const url2 = "https://avatar.csdnimg.cn/0/9/E/2_qq_24917475_1559180524.jpg";

loadImg(url1).then((img1) => {
	console.log(img1.width, img1.height)
	return loadImg(url2)
}).then(img2 => {
	console.log(img2.width, img2.height)
}).catch(error => {
	console.error(error);
})