XQA
Back to Web Development
2026-02-126 min read

SyntaxError: await is only valid in async functions, async generators and modules

Learn SyntaxError: await is only valid in async functions, async generators and modules step by step with clear examples and exercises.

Why This Matters

Understanding the SyntaxError: await is only valid in async functions, async generators and modules error is crucial when working with JavaScript's asynchronous features. This error occurs when you attempt to use await outside an async function or module, which can lead to frustrating issues while developing responsive and efficient web applications.

This lesson will delve deeper into the topic, providing examples and practice questions to help solidify your understanding of async functions, await, and how they work together to make asynchronous JavaScript more manageable.

Why This Matters

In modern web development, asynchronous JavaScript plays a vital role in creating responsive and efficient applications. However, using await outside an async function or module can lead to a SyntaxError, which can be frustrating when trying to build smooth-running websites. Understanding this error and how to avoid it will help you write cleaner, more effective code.

This lesson will delve deeper into the topic, providing examples and practice questions to help solidify your understanding of async functions, await, and how they work together to make asynchronous JavaScript more manageable.

Prerequisites

Before diving into the core concept, make sure you're familiar with:

  1. JavaScript ES6 features, including async functions and await.
  2. Understanding of promises in JavaScript.
  3. Basic HTML and CSS for creating simple web pages.
  4. Familiarity with Node.js and its command line interface (CLI) is beneficial but not required.
  5. Knowledge of modern browser features, such as the Fetch API.

Core Concept

The await keyword is used to pause the execution of an asynchronous function until a promise is resolved or rejected. It can only be used within an async function, async generator, or module. When you try to use it outside these contexts, JavaScript throws a SyntaxError.

// Incorrect usage of await
await fetch("https://example.com"); // SyntaxError: await is only valid in async functions and the top level bodies of modules

To use await, you should wrap your code within an async function, as shown below:

// Correct usage of await
async function fetchData() {
try {
const response = await fetch("https://example.com");
// ...continue processing the response
} catch (error) {
console.error(error);
}
}

The Role of Promises

Understanding promises is essential for understanding await. A promise represents a value that may not be available yet but will be resolved or rejected at some point in the future. When using async/await, you can write asynchronous code that looks synchronous, as the await keyword makes it easier to work with promises.

// Using promises without async/await
fetch("https://example.com")
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));

// Using async/await
async function fetchData() {
try {
const response = await fetch("https://example.com");
const data = await response.text();
console.log(data);
} catch (error) {
console.error(error);
}
}

Worked Example

Let's create a simple web page that fetches data from an API and displays it using JavaScript.

  1. Create an HTML file called index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async/Await Example</title>
</head>
<body>
<h1>Data from API:</h1>
<div id="data"></div>
<script src="app.js"></script>
</body>
</html>
  1. Create a JavaScript file called app.js.
// Using the Fetch API with async/await
async function fetchData() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await response.json();
document.getElementById('data').innerText = JSON.stringify(data, null, 2);
} catch (error) {
console.error(error);
}
}

fetchData();
  1. To run this example locally, save both files in a folder and open the index.html file in your web browser. You can also use a simple HTTP server like LiveServer to serve the files.

This example demonstrates how to use async/await to fetch data from an API and display it on a web page.

Common Mistakes

  1. Using await outside of an async function or module.
  2. Forgetting to call the async keyword when defining an async function.
  3. Not handling errors properly, leading to unhandled rejections and potential crashes.
  4. Misunderstanding the difference between promises and async/await.
  5. Using await inside a loop without proper handling, causing unexpected behavior.
  6. Trying to use await with non-promise values or objects.
  7. Forgetting to return a value from an async function when necessary.

Common Mistakes - Examples

  1. Incorrect usage of await outside an async function:
// SyntaxError: await is only valid in async functions and the top level bodies of modules
await fetch("https://example.com");
  1. Forgetting to call the async keyword when defining an async function:
// FunctionNotDefinedError: fetchData is not a function
fetchData(); // Assuming fetchData is an async function
  1. Not handling errors properly:
// Uncaught (in promise) Error: Fetch failed
async function fetchData() {
const response = await fetch("https://example.com");
const data = await response.text();
console.log(data); // This line will never be executed if an error occurs during the fetch
}
  1. Misunderstanding the difference between promises and async/await:
// Using async/await to replace .then() chaining unnecessarily
function fetchData() {
return fetch("https://example.com")
.then(response => response.text())
.then(data => console.log(data));
}

// Correct usage of async/await for the same scenario
async function fetchData() {
try {
const response = await fetch("https://example.com");
const data = await response.text();
console.log(data);
} catch (error) {
console.error(error);
}
}
  1. Using await inside a loop without proper handling:
// Infinite loop due to await pausing the loop's execution
async function fetchData() {
for (let i = 0; i < 10; i++) {
const response = await fetch("https://example.com");
// ...continue processing the response
}
}

Practice Questions

  1. Rewrite the following synchronous code using async/await:
function fetchData() {
const response = fetch("https://example.com");
const data = response.text();
console.log(data);
}
  1. Given the following code, why does it throw a SyntaxError? How can you fix it?
async function fetchData() {
const response = await fetch("https://example.com");
await response; // SyntaxError: Unexpected token 'await'
}
  1. What is the difference between a promise and an async function with await?
  1. How can you handle multiple errors in an async function with multiple await expressions?
  1. Why might using await inside a loop cause unexpected behavior, and how can it be handled properly?

FAQ

Can I use await in a regular function (not an async function)?

No, you can only use await within an async function or async generator.

What happens when an await is used inside a loop?

When using await inside a loop, the execution of the loop will pause until the promise resolved by the awaited expression is fulfilled. This can lead to unexpected behavior if not handled properly.

How do I handle errors in async functions with multiple await expressions?

You can use try-catch blocks around the entire async function or wrap each individual await expression in its own try-catch block, depending on your specific needs.

Can I use async/await with older versions of JavaScript (pre-ES6)?

No, async/await is an ES6 feature and requires a transpiler like Babel to work with older versions of JavaScript.

How do I return a value from an async function?

You can use the return keyword as you would in a regular function. The value returned will be the resolved value of the promise returned by the async function.

What is the purpose of the await keyword, and how does it work with promises?

The await keyword pauses the execution of an async function until a promise is resolved or rejected. It makes it easier to write asynchronous code that looks synchronous, as it allows you to wait for a promise to resolve before continuing with the next line of code.

SyntaxError: await is only valid in async functions, async generators and modules | Web Development | XQA Learn