如何逃离 async / await 地狱

发布于 2024-12-25 13:12:50 字数 4143 浏览 7 评论 1

为避免不必要的误解，本文标题由「避免陷入 async/await 地狱」改为「How to escape async/await hell」 -- 2018/05/20 09:50

async/await 是 ES7 的新语法。在 async/await 标准出来之前，JavaScript 的异步编程经历了 callback --> promise --> generator 的演变过程。在 callback 的时代，最让人头疼的问题就是回调地狱(callback hell)。所以，在 async/await 一经推出，社区就有人认为「这是 JavaScript 异步编程的终极解决方案」。

但 async/await 也可能带来新的问题。

最近阅读了 Aditya Agarwal 的一篇文章： How to escape async/await hell 。这篇文章主要讨论了过度使用 async/await 导致的新的「地狱」问题，其已经在 Medium 上获得了 19k+ 的 Applause。

好不容易逃离了一个「地狱」，又马上陷入另一个「地狱」了。

何为 async/await 地狱

在编写异步代码时，人们总是喜欢一次写多个语句，并且在一个函数调用之前使用 await 关键字。这可能会导致性能问题，因为很多时候一个语句并不依赖于前一个语句——但使用 await 关键字后，你就需要等待前一个语句完成。

示例

假设你要写一个订购 pizza 和 drink 的脚本，代码可能是如下这样的：

(async () => {
  const pizzaData = await getPizzaData()    // async call
  const drinkData = await getDrinkData()    // async call
  const chosenPizza = choosePizza()    // sync call
  const chosenDrink = chooseDrink()    // sync call
  await addPizzaToCart(chosenPizza)    // async call
  await addDrinkToCart(chosenDrink)    // async call
  orderItems()    // async call
})()

这段代码开起来没什么问题，也能正常的运行。但是，这并不是一个好的实现，因为这把本身可以并行执行的任务变成了串行执行。

选择一个 drink 添加到购物车和选择一个 pizza 添加到购物车可以看作是两个任务，而这两个任务之间并没有相互依赖的关系，也没有特定的顺序执行关系。所以这两个任务是可以并行执行的，这样能提高性能。而上述代码将二者变成了串行执行，显然是降低了程序性能的。

更糟糕的例子

假设要写一个程序，根据 followers 数用来显示 Github 中国区用户的排名情况。

如果只是获取排名，我们可以调用 Github 官方的 Search users 接口，伪代码如下：

async function getUserRank () {
	const data = await fetch(search_url);
	return data;
}

getUserRank();

调用 getUserRank 函数就能获取到想要的结果。但是，你可能还要想要获取每个用户的 follower 数、email、地区和仓库等数据，而 Search users 接口并没有返回这些数据，你可能需要再去调用 Single user 接口。

然后上述代码可能被改写为：

async function getUserRank () {
	const data = await fetch(search_url);
	const res = [];
	
	for(let i = 0; i < data.length; i++) {
		const item = data[i];
		const user = await fetch(user_url);
		res.push({ ...item, ...user });
    }
	
	return res;
}

getUserRank();

运行查看结果，自己想要的数据都拿到了。但是，你发现一个问题，程序运行时间有点长，该怎么优化下呢？

其实，铺垫了这么长，就是想说明一个问题： 你陷入了 async/await 的地狱 。

上述代码的问题在于，获取每个用户资料的请求并不存在依赖性，就类似上文中的选择 pizza 和 drink 一样，这是可以并行执行的请求。而根据上述代码，请求都变成了串行执行，这当然会损耗程序的性能。

按照上述代码，可以看一下其异步请求的动态图：

images

可以看到，获取用户资料的每个请求都需要等到上一个请求完成之后才能执行，Waterfall 处于一个串行的状态。那要怎么改进这个问题呢？

既然获取每个用户资料的请求并不存在依赖性，那么我们可以先触发异步请求，然后延迟处理异步请求的结果，而不是一直等该请求完成。根据这个思路，那可能改进的代码如下：

async getUserDetails (username) {
	const user = await fetch(user_url);
	return user;
}

async function getUserRank () {
	const data = await fetch(search_url);
	const promises = []
	
	for(let i = 0; i < data.length; i++) {
		const item = data[i];
		const p = getUserDetails(item.username);
		promises.push(p);
    }
    // 更精简的代码
    // const promises = data.map((item) => getUserDetails(item.username))
	await Promise.all(promises).then(handleYourData);
}

getUserRank();

可以看一下异步请求的动态图：

images