Back to Biomejs

noAwaitInLoops

src/content/docs/linter/rules/no-await-in-loops.mdx

latest4.0 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/performance/noAwaitInLoops`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`no-await-in-loop`](https://eslint.org/docs/latest/rules/no-await-in-loop)

How to configure

json
{
	"linter": {
		"rules": {
			"performance": {
				"noAwaitInLoops": "error"
			}
		}
	}
}

Description

Disallow await inside loops.

Using await in a loop makes your asynchronous operations run one after another instead of all at once. This can slow things down and might cause unhandled errors. Instead, create all the promises together and then wait for them simultaneously using methods like Promise.all().

Examples

Invalid

js
async function invalid() {
    for (const thing of things) {
        const result = await asyncWork();
    }
}
<pre class="language-text"><code class="language-text">code-block.js:3:24 <a href="https://biomejs.dev/linter/rules/no-await-in-loops">lint/performance/noAwaitInLoops</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Avoid using </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> inside loops.</span> <strong>1 │ </strong>async function invalid() &#123; <strong>2 │ </strong> for (const thing of things) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> const result = await asyncWork(); <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong> &#125; <strong>5 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Using </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> inside loops might cause performance issues or unintended sequential execution, consider use </span><span style="color: lightgreen;"><strong>Promise.all()</strong></span><span style="color: lightgreen;"> instead.</span> </code></pre>

Valid

js
async function valid() {
    await Promise.all(things.map((thing) => asyncWork(thing)))
}
</TabItem> </Tabs>