在现代的 Web 应用中，网络请求已经成为了一个无法避免的部分。而在处理网络请求的过程中，我们通常需要使用异步编程的方式来处理回调函数和异步数据。ES8 中引入了 async/await 关键字解决了这个问题，但是在实际的开发中，我们还需要考虑如何并发执行异步请求，并且保持代码的可读性和可维护性。在本文中，我们将介绍如何使用 Promise.all() 和 for...of 循环来并发执行异步请求的最佳实践和示例代码。
为什么要并发执行异步请求？
网络请求通常是一个耗时的操作，我们需要等待服务器的响应才能获取到数据。在某些情况下，例如页面初始化时，我们需要一次性获取多个请求的数据，用于渲染页面。
使用 Promise.all() 实现并发执行异步请求
Promise.all() 可以将多个 Promise 并发执行，并在所有 Promise 执行完毕后返回结果的数组。
const [data1, data2, data3] = await Promise.all([ fetchData1(), fetchData2(), fetchData3() ]);
串行执行和并发执行的比较
下面我们来比较一下并发执行和串行执行的区别。假设有这样一个需求：我们需要获取三个接口返回的数据，并在这三个接口都返回数据之后，把数据与本地数据合并后渲染界面。接下来我们来实现这个需求。
串行执行
const data1 = await fetchData1(); const data2 = await fetchData2(); const data3 = await fetchData3(); const localData = getLocalData(); const result = mergeData(data1, data2, data3, localData); render(result);
在上面的代码中，我们使用了三个 await 来按顺序执行三个接口请求，并在三个请求都完成之后获取本地数据，进行数据合并和渲染。
这种方式看起来比较简单，但是它的缺点也很明显：每个请求必须等待前一个请求完成才能执行。这样就会拖延了整个请求过程的时间，因为在请求 1 的等待过程中，请求 2 和请求 3 的数据也只能在请求 1 完成之后才能返回。
并发执行
-- -------------------- ---- ------- ----- ------- ------ ------ - ----- ------------- ------------- ------------- ------------ --- ----- --------- - --------------- ----- ------ - ---------------- ------ ------ ----------- ---------------
在上面的代码中，我们使用了 Promise.all() 来并发执行三个接口请求，这样可以大大缩短请求的等待时间。而 await 等待的是 Promise.all() 的返回结果，因此可以在所有的接口请求都完成之后自动执行后续的操作。
总结
通过上面的例子我们可以看出：并发执行接口请求可以大大缩短请求的等待时间，从而提升应用程序的响应速度。而且，使用 Promise.all() 可以避免出现过多的嵌套回调，使代码更加易读和易于维护。
使用 for...of 循环来并发执行多个异步请求
对于请求数量较多的情况，使用 Promise.all() 并发执行可能会导致性能问题，因为 Promise.all() 一次性执行的请求数量是有限制的。这时候我们可以使用 for...of 循环来并发执行多个异步请求。
下面是使用 for...of 循环并发执行多个异步请求的示例代码：
const urls = [...];
const requests = urls.map(url => fetch(url));
for (let request of requests) {
const response = await request;
const data = await response.json();
processData(data);
}在上面的代码中，我们首先使用 fetch() 函数创建了一个请求数组，然后使用 for...of 循环并发执行了这些请求，并在请求完成之后调用 processData() 函数进行处理。
结语
在本文中，我们介绍了使用 Promise.all() 和 for...of 循环来并发执行异步请求的最佳实践和示例代码。在实际开发中，我们应该根据具体的情况选择不同的方法来进行网络请求。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465e3b7968c7c53b068d8b3