异步的概念
js的异步的概念的起因为js是单线程语言，一次只能同时做一件事。js和dom渲染公用同一个线程，因为js可修改dom结构，dom渲染的时候，js必须停止，js运行时，dom停止渲染。
异步是由js单线程这个原因而来的，并不是故意搞一个来为难大家，异步的存在是解决js运行机制的问题的。
所以我们遇到等待（网络请求，定时任务）时不能卡住，需要用异步（回调callback形式）解决。
异步和同步的区别：
同步
console.log(100);
alert(200)；
console.log(300);
一个hin简单的例子，一个console打印100，接着一个alert弹出，这时下一个console是不会执行的，如果你不点击alert，那么这么地方就卡住了，后面的东西都不会执行，浏览器也不会渲染。只有当你点击alert弹框的确定后，才会console打印300，这就是同步。
同步简单来说，就是一个事件的开始必须等待上一个事件的结束。同步会阻塞代码执行。
异步
console.log(100);
setTimeout(function() {
console.log(200)
}, 1000);
console.log(300);
又一个hin简单的例子，一个console打印100，接着是一个setTimeout定时器，1秒后执行console打印200，那么等待这1秒就卡这儿吗？当然不行了，要继续执行下面的console打印300才行，然后1秒后再打印定时器内的200。
异步就是为了解决同步的问题才诞生的，如果代码中都是像同步的例子那样，那样体验就太差了。
每一个异步函数就是一个callback回调函数。异步不会阻塞代码执行。
异步的应用场景
对于前端来说，最主要的两个场景就是：
- 网络请求（如ajax图片加载）
- 定时任务（如setTimeout）
console.log('start');
$.get('./data.json', function() {
console.log(data1);
});
console.log('end');
这是一个jq ajax网络请求的例子，这个网络请求我们调用就行了，爱什么时候返回就什么时候返回，反正不影响后面的console就行。
console.log('start');
let img = document.createElement('img');
img.onload = function() {
console.log('loaded');
}
img.src = '/xxx.png';
console.log('end');
这是一个图片加载的例子，这个onload也是callback函数，图片先让它加载着，不用管它，不影响后面的console输出end就好。
console.log(100);
setTimeout(function() {
console.log(200)
}, 1000);
console.log(300);
// --------------------
console.log(100);
setInterval(function() {
console.log(200)
}, 1000);
console.log(300);
setTimeout和setInterval，就不多说了。
异步的大坑 - callbak hell
什么是callback hell? callback hell就是 回调地狱。
场景：我们一般在写代码的时候，有时候B接口需要用到A接口返回的数据，C接口需要用到B接口返回的数据，这样就会写成三四个回调函数嵌套。这样写代码，其实没有问题。但是你没有想过，如果是8，9个接口嵌套，是不是就原地爆炸💥？
像这样：
// 获取第一份数据
$.get(url1, (data1) => {
console.log(data1);
// 获取第二份数据
$.get(url2, (data2) => {
console.log(data2);
// 获取第三份数据
$.get(url3, (data3) => {
console.log(data3);
// 还可能获取更多的数据
})
})
})
于是，为了解决这个问题，promise诞生了。
Promise
上面的代码，我们用promise实现是酱的：
// 先用promise封装一下ajax请求
function getData(url) {
return new Promise((resolve, reject) => {
$.ajax({
url,
success(data) {
resolve(data);
}
error(err) {
reject(err);
}
})
})
}
// 实现
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.log(err));
promise解决的问题其实还是用了callback的形式，只不过把callback形式变成了一个非嵌套的形式，变成了一个管道式的串联的形式，这就是一个进步，这样就比较好理解，永远是一层的关系，不像之前，一层套一层，hin麻烦，这就是promise牛逼的地方。
注意：promise解决了不是callback的问题，而是解决了callback嵌套的问题。
下面这个例子是用promise写的简单图片加载：
function loadImg(src) {
const p = new Promise((resolve, reject) => {
const img = document.createElement('img');
img.onload = () => {
resolve(img); // resolved
};
img.onerror = () => {
const err = new Error(`图片加载失败${src}`);
reject(err); // rejected
};
img.src = src;
});
return p;
}
const url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607687820492&di=19aaed2d40d4263b5a97432811ed6379&imgtype=0&src=http%3A%2F%2Fi.17173cdn.com%2F2fhnvk%2FYWxqaGBf%2Fcms3%2FfNTkhSbocptcacd.png';
const p = loadImg(url);
p.then(img => {
console.log(img.width); // 获取图片的宽
}).then(img => {
console.log(img.height); // 获取图片的高
}).catch(err => {
console.log(err);
})
网友评论