在前端开发中，使用 async/await 可以方便地处理异步请求，但是如果在循环中使用 await，可能会导致程序性能下降。本文将介绍通过 ESLint 来禁止在循环内使用 await。
为什么不在循环内使用 await？
JavaScript 是一门单线程语言，当在循环中使用 await 时，程序会等待每个异步函数执行完成后再执行下一次循环，这会使程序的执行速度明显变慢，尤其在处理大量数据时表现更为明显。
具体来说，当我们在循环内部使用 await 时，相当于在每个异步操作完成之前阻塞了事件循环，导致其他异步操作无法并行处理。因此，对于需要迭代的异步任务，最好使用 Promise.all() 或其它并发控制方法来保证并发执行。
如何禁止在循环内使用 await？
ESLint 是一个用于代码检查的工具，它通过定义规则来检查 JavaScript 代码是否符合预定的规范。ESLint 可以帮助前端工程师规范团队代码风格、发现潜在的代码缺陷等。
如果你的代码使用了 await，ESLint 可以通过配置规则来检查你的代码是否符合代码规范。以下是如何配置一条规则来禁止在循环中使用 await:
// .eslintrc.js
module.exports = {
// ...
rules: {
'no-await-in-loop': 'error'
}
};在上述代码中，我们使用了 ESLint 中的规则 no-await-in-loop 来禁止在循环内使用 await。当我们将 no-await-in-loop 设为 error 级别时，如果代码中出现在循环中使用 await 的情况，ESLint 将会报错停止编译。
示例代码
下面是一个使用 await 的循环代码示例，它会导致程序性能下降：
-- -------------------- ---- -------
----- -------- ----------- -
----- ---- - --- -- ---
----- ------ - ---
--- ------ ---- -- ----- -
----- --- - ----- --------------------------------------------
----- ---- - ----- -----------
------------------
-
--------------------
-我们可以用 Promise.all() 代替上述循环代码，以实现并发执行：
-- -------------------- ---- -------
----- -------- ----------- -
----- ---- - --- -- ---
----- ------ - ----- -------------------------- -------------- -
----- --- - ----- --------------------------------------------
----- ---- - ----- -----------
------ -----
----
--------------------
-总结
本文介绍了为什么不要在循环中使用 await，并且说明如何使用 ESLint 规则来限制这种行为。我们还提供了一个代码示例来说明如何通过 Promise.all() 在异步任务中实现并发。
重申一遍，对于处理大量数据和需要迭代的异步任务，采用 Promise.all() 或其它并发控制方法可以显著提高程序的执行速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6bcc6f6b2d6eab3215b90