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