简介
很久以前，在Promise出现之前，编写js的异步代码是一件十分蛋疼的事情，一旦异步流程一复杂，回调地狱就会等着你，所以基于node.js的服务端编码开发的体验非常差，项目的可维护性和可读性也非常差，这也是最初node.js最为人所诟病的地方。
在现代的js项目中，回调函数已经基本被Promise取代，而async/await的出现更是解决的promise在使用中会产生大量的胶水代码，以及不同Promise之间共享数据困难的问题，这又大大提升的编写异步流程的开发体验，但是async/await本身是基于promise的，而在很多情况下，async/await并不能完全取代promise的位置，理解promise是编写高质量的异步代码的基础。下面我们就来探讨一下在js中的异步流程控制的问题。如何在异步代码中保证异步流程的执行效率以及可读性和可维护性。以下为一个例子：
如何制作一个披萨？
制作饼皮（dough）
制作酱汁（sauce）
品尝一下酱汁，根据酱汁的口味决定放哪种芝士（cheese）
第一版实现
async function makePizza(sauceType = 'red') {
let dough = await makeDough();
let sauce = await makeSauce(sauceType);
let cheese = await grateCheese(sauce.determineCheese());
dough.add(sauce);
dough.add(cheese);
return dough;
}
基于async/await，看起来逻辑很清晰，但是它最大的问题是这不是一个最优的异步流程控制。
第二版实现
// 原来的流程
|-------- dough --------> |-------- sauce --------> |-- cheese -->
// 改进的流程
|-------- dough -------->
|-------- sauce --------> |-- cheese -->
async function makePizza(sauceType = 'red') {
let [ dough, sauce ] =
await Promise.all([ makeDough(), makeSauce(sauceType) ]);
let cheese = await grateCheese(sauce.determineCheese());
dough.add(sauce);
dough.add(cheese);
return dough;
}
效率比第一版就高了很多。使用promise.all并行执行异步任务，流程也比较清晰。
第三版实现
由于制作dough的时间是比较长的，我们的流程其实还有改进的空间，如下。
// 上一步改进的流程
|-------- dough -------->
|--- sauce ---> |-- cheese -->
// 进一步改进的流程
|--------- dough --------->
|---- sauce ----> |-- cheese -->
function makePizza(sauceType = 'red') {
let doughPromise = makeDough();
let saucePromise = makeSauce(sauceType);
let cheesePromise = saucePromise.then(sauce => {
return grateCheese(sauce.determineCheese());
});
return Promise.all([ doughPromise, saucePromise, cheesePromise ])
.then(([ dough, sauce, cheese ]) => {
dough.add(sauce);
dough.add(cheese);
return dough;
});
}
现在的异步流程应该是最优的了，但是问题来了，这样的流程用async/await表示的话就有点麻烦了，我们这里先用promise实现了这个最优流程，可以看到promise的弊端很明显，充满了胶水代码，我们再也不能像我们的第一版实现一样，一眼就能看出我们这个函数的异步流程是怎么样的了，可读性下降了。
第四版实现
// 最优流程
|--------- dough --------->
|---- sauce ----> |-- cheese -->
async function makePizza(sauceType = 'red') {
let doughPromise = makeDough();
let saucePromise = makeSauce(sauceType);
let sauce = await saucePromise;
let cheese = await grateCheese(sauce.determineCheese());
let dough = await doughPromise;
dough.add(sauce);
dough.add(cheese);
return dough;
}
这一版实现，代码看起来整洁了很多，但是它的异步流程更加不清晰了，通过提前创建promise然后在之后再进行await，我们得到了整洁的代码，但是却使得流程更加不清晰，隐式的执行promise然后await，让await的语义变得很不明了。
第五版实现
async function makePizza(sauceType = 'red') {
let prepareDough = memoize(async () => makeDough());
let prepareSauce = memoize(async () => makeSauce(sauceType));
let prepareCheese = memoize(async () => {
return grateCheese((await prepareSauce()).determineCheese());
});
let [ dough, sauce, cheese ] =
await Promise.all([
prepareDough(), prepareSauce(), prepareCheese()
]);
dough.add(sauce);
dough.add(cheese);
return dough;
}
这个版本相比于上一个版本的区别主要是现在我们不再提前创建promise，而保存为一个生成函数，并且使用memoize缓存结果，从而使得promise只需要resolve一次就可以缓存结果。这样子的异步流程相比于上一个版本就清楚了很多，而代码依然可以保持很好的可读性。
总结
感觉Promise.all和await/async的结合依然不是很优雅，总感觉有点难受，在未来，js的异步流程控制肯定还会有更优雅的解决方案。
