Back to Biomejs

useAwait

src/content/docs/linter/rules/use-await.mdx

latest7.9 KB
Original Source

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

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.4.0` - Diagnostic Category: [`lint/suspicious/useAwait`](/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 [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`require-await`](https://eslint.org/docs/latest/rules/require-await) - Same as [`@typescript-eslint/require-await`](https://typescript-eslint.io/rules/require-await)

How to configure

json
{
	"linter": {
		"rules": {
			"suspicious": {
				"useAwait": "error"
			}
		}
	}
}

Description

Ensure async functions utilize await.

This rule reports async functions that lack an await expression. As async functions return a promise, the use of await is often necessary to capture the resolved value and handle the asynchronous operation appropriately. Without await, the function operates synchronously and might not leverage the advantages of async functions.

Examples

Invalid

js
async function fetchData() {
// Missing `await` for the promise returned by `fetch`
  return fetch('/data');
}
<pre class="language-text"><code class="language-text">code-block.js:1:1 <a href="https://biomejs.dev/linter/rules/use-await">lint/suspicious/useAwait</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">This </span><span style="color: Orange;"><strong>async</strong></span><span style="color: Orange;"> function lacks an </span><span style="color: Orange;"><strong>await</strong></span><span style="color: Orange;"> expression.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>async function fetchData() &#123; <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><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;">&gt;</span></strong> <strong>2 │ </strong>// Missing &#96;await&#96; for the promise returned by &#96;fetch&#96; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> return fetch('/data'); <strong><span style="color: Tomato;">&gt;</span></strong> <strong>4 │ </strong>&#125; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong> <strong>5 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Remove this </span><span style="color: lightgreen;"><strong>async</strong></span><span style="color: lightgreen;"> modifier, or add an </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> expression in the function.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>async function fetchData() &#123; <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><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;">&gt;</span></strong> <strong>2 │ </strong>// Missing &#96;await&#96; for the promise returned by &#96;fetch&#96; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> return fetch('/data'); <strong><span style="color: Tomato;">&gt;</span></strong> <strong>4 │ </strong>&#125; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong> <strong>5 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;"><strong>Async</strong></span><span style="color: lightgreen;"> functions without </span><span style="color: lightgreen;"><strong>await</strong></span><span style="color: lightgreen;"> expressions may not need to be declared </span><span style="color: lightgreen;"><strong>async</strong></span><span style="color: lightgreen;">.</span> </code></pre>

Valid

js
async function fetchData() {
  const response = await fetch('/data');
  const data = await response.json();
  return data;
}

// This rule does not warn about non-async functions
function processData() {
  return compute(data);
}

// Nor does it warn about empty `async` functions
async function noop() { }

// Async generators that use `yield*` with an async iterable
async function* delegateToAsyncIterable() {
  yield* otherAsyncIterable();
}
</TabItem> </Tabs>