在前端开发中，我们经常需要使用forEach()方法遍历数组或对象并执行一些操作。然而，在某些情况下，我们可能需要在forEach()循环中使用异步操作，例如发送网络请求或读取本地文件。这时候，我们需要使用异步/等待来确保代码的正确性和可维护性。
传统方式
在传统的JavaScript中，我们通常会使用回调函数来处理异步操作。例如，如果我们要在forEach()循环中异步请求网络数据，则可以使用以下代码：
-- -------------------- ---- -------
----- ---- - ----------------------------- ---------------------------- -----------------------------
---------------- -- -
----------
-------------- -- ----------------
---------- -- -
-- ----
--
------------ -- -
-- ----
---
---这种方式看起来还不错，但是它有一个严重的问题：由于异步请求不会阻止代码的继续执行，所以forEach()循环会在所有异步请求开始后立即结束，导致我们无法准确控制异步请求的顺序和结果。因此，我们需要一种更好的方式来处理这种情况。
使用异步/等待
通过使用ES2017中引入的async/await语法，我们可以轻松地使用异步/等待来控制代码的执行流程。使用异步/等待的代码如下所示：
-- -------------------- ---- -------
----- -------- --------- -
----- ---- - ----------------------------- ---------------------------- -----------------------------
--- ------ --- -- ----- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
-- ----
-
-
--------------------- -- -
-- ----
---这里，我们使用了一个async函数来包装循环体，并将其标记为异步函数。在循环内部，我们可以使用await关键字来暂停代码的执行，直到异步请求完成并返回结果。由于await会阻止代码的继续执行，因此我们可以确保异步请求按顺序依次执行，并且可以根据需要处理异步请求的结果。
深度思考
尽管使用异步/等待可以使代码更加简洁和易于阅读，但仍然需要注意一些细节问题。
首先，如果我们需要同时发起多个异步请求，那么使用Promise.all()可能是更好的选择。例如：
async function getData() {
const urls = ['https://example.com/data1', 'https://example.com/data2', 'https://example.com/data3'];
const promises = urls.map(url => fetch(url).then(response => response.json()));
const results = await Promise.all(promises);
// 处理结果数据
}在这个例子中，我们使用了Promise.all()方法来等待所有异步请求完成后再继续执行代码。这样可以确保所有异步请求都已完成并返回结果，从而使我们可以更加自信地操作数据。
其次，我们需要注意错误处理问题。在使用异步/等待时，我们应该始终使用try...catch语句来捕获可能出现的异常，并适当处理它们。例如：
-- -------------------- ---- -------
----- -------- --------- -
----- ---- - ----------------------------- ---------------------------- -----------------------------
--- -
--- ------ --- -- ----- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
-- ----
-
- ----- ------- -
---------------------
-- ----
-
-指导意义
使用异步/等待的循环是前端开发中非常常见的任务之一。通过掌握此技术，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8770