js中的异步是初学者绕不过去的几座大山之一。
什么是异步
简单介绍下异步，Javascript语言是单线程的，代码依次执行，一些情况下就会造成代码阻塞，因此就需要引出异步。异步也就是用来解决这个问题的。
js语言也在不停的努力更加优雅的实现异步。由于异步诞生之初就很复杂，导致异步成为了许多初学者的噩梦，老司机也是频频翻车。
从callback到promise，从generator到async/await，我们也可看到异步的解决方案越来越“优雅”。
异步初探
一个经典的题目——红绿灯
红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次，不断交替重复亮灯
先写出每个亮灯的方法
function red() {
console.log("红灯");
}
function green() {
console.log("绿灯");
}
function yellow() {
console.log("黄灯");
}
接下来就要用不同的异步方式实现
1.callback方式
const taskCallback = (timer, light, callback) => {
setTimeout(() => {
if (light === "red") {
red();
} else if (light === "green") {
green();
} else if (light === "yellow") {
yellow();
}
callback();
}, timer);
};
const loopCallbackTask = () => {
taskCallback(3000, "red", () => {
taskCallback(1000, "green", () => {
// 当黄灯亮起后，递归调用loopCallbackTask函数，重复亮灯流程
taskCallback(2000, "yellow", loopCallbackTask);
});
});
};
loopCallbackTask();
这应该是最早实现异步的方式，可以看到代码流程越复杂嵌套的回调函数越多。当只有三层时，代码的可读性就已经大大降低了。如果再多几层，那简直就是“回调地狱”。
2.promise方式
const taskPromise = (timer, light) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (light === "red") {
red();
} else if (light === "green") {
green();
} else if (light === "yellow") {
yellow();
}
resolve();
}, timer);
});
const loopPromiseTask = () => {
taskPromise(3000, "red")
.then(() => taskPromise(1000, "green"))
.then(() => taskPromise(2000, "yellow"))
.then(loopPromiseTask);
};
loopPromiseTask();
在promise方式中，移除了回调函数，每次在灯亮的操作完成后，都resolve当前promise，那么在当前promise的成功响应里执行下一个亮灯操作，依次执行直到黄灯亮起，递归调用loopPromiseTask方法即可。
promise的好处显而易见，不论多复杂的逻辑，嵌套层级永远是一。是不是越来越“优雅”了呢。
3.async/await方式
const taskAsync = (timer, light) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (light === "red") {
red();
} else if (light === "green") {
green();
} else if (light === "yellow") {
yellow();
}
resolve();
}, timer);
});
const loopAsyncTask = async () => {
await taskAsync(3000, "red");
await taskAsync(1000, "green");
await taskAsync(2000, "yellow");
loopAsyncTask();
};
loopAsyncTask();
async/await的方式更加直观和简介，乍一看好像是同步的写法，没错async/await就是用同步的方式实现异步。但是学习async/await的前提就是掌握promise，因为async/await 其实是语法糖。
再探异步
很多人包括刚接触异步的我都会有这样的疑问，例子我都懂，那开发中有什么应用场景呢，别急下面就用一个开发中经常会遇到的场景深入的理解异步的实现。
图片加载问题
假设预先有 urlIds 数组，数组的每一项都是一个完整的图片地址其中的Id。根据这个数组，依次请求图片进行预加载。
首先我们需要一个图片请求的方法
const urlIds = [1, 2, 3, 4, 5];
const loadImg = urlId => {
// 假设图片都保存在一个特定的路径下
const url = `http://www.xxx.xxx/image/${urlId}`;
return new Promise((resolve, reject) => {
const img = new Image();
// 图片加载失败，执行promise失败的响应
img.onerror = function() {
reject(urlId);
};
// 图片加载成功，执行promise成功的响应
img.onload = function() {
resolve(urlId);
};
img.src = url;
});
};
接下来只要在合适的时候调用这个loadImg方法即可。
实现1——使用数组的reduce方法依次加载图片
urlIds.reduce((prePromise, urlId) => {
// 在每一个promise成功的响应事件中执行下一张图片的loadImg方法
return prePromise.then(() => loadImg(urlId));
}, Promise.resolve());
实现2——使用async/await的方式
const loadImgs = async () => {
for (i of urlIds) {
await loadImg(urlIds[i]);
}
};
loadImgs();
提问：上述两种方式都是依次执行的，只有加载完第一张后才开始加载第二张。为了提高效率，将所有图片同时加载(不考虑浏览器并发数的限制)，该如何去做。
实现3——所有图片一起加载
// 对id数组的每一项都执行loadImg方法，返回的是promise对象
// 那么这个promiseArray就是一个装载了许多promise对象的数组
const promiseArray = urlIds.map(urlId => loadImg(urlId));
// 利用Promoise.all这个API，当所有图片完成加载后通知我们
Promise.all(promiseArray)
.then(() => {
console.log("all imgs loaded");
})
.catch(() => {
console.log("sth wrong");
});
提问：一些情况下，我们要控制图片请求的并发数，如最多支持3个图片同时请求，该怎么做？
实现4——控制并发加载图片
这是需要用到Promise.race这个API
const loadByLimit = (urlIds, loadImg, limit) => {
const arrIds = [...urlIds];
// 如果实际请求数量比最大并发数小，直接全部请求
if (arrIds.length < limit) {
const promiseArr = arrIds.map(id => loadImg(id));
return Promise.all(promiseArray);
}
// 只取相应数量的id，并执行loadImg返回promise对象。
const promiseArr = arrIds.splice(0, limit).map(id => loadImg(id));
arrIds
.reduce(
(prePromise, urlId) =>
prePromise
.then(() => Promise.race(promiseArr))
.catch(error => console.log(error))
.then(resolveId => {
// 从promiseArr数组中将resolveId移除（成功的就移出数组）
let index = promiseArr.findIndex(id => id === resolveId);
promiseArr.splice(index, 1);
// 移除已经加载完项后，添加未加载项到数组中（还未加载的就添加进数组）
promiseArr.push(loadImg(urlId));
}),
Promise.resolve()
)
.then(() => Promise.all(promiseArr));
};
loadByLimit(urlIds, loadImg, 3);
逻辑稍微复杂了一些，不过更贴近开发的场景。
Promise.race接收一个promise数组，并且返回这个数组中第一个resolve的promise的返回值。在有Promise.race返回后，从promise数组剔除该项，并加入新的promise到数组中。继续执行，始终保持数组长度小于等于limit值。
异步不可怕，分分钟就拿下
异步在js中扮演了非常重要的角色，不论是callback、promise、async/await或是本文没有提到的generator，每种异步方案都是相辅相成的。
如果你没有完全掌握callback，那么你也很难理解promise，那么async/await以及generator更是无从谈起了。
下一篇将从事件循环、宏任务、微任务多角度深入理解异步。
网友评论