Async/Await in JavaScript #

Async/await is syntactic sugar built on top of Promises, making asynchronous code look and behave more like synchronous code.

Async Functions #

An async function always returns a Promise:

// Async function declaration
async function fetchData() {
 return "data";
}
// Equivalent to:
function fetchData() {
 return Promise.resolve("data");
}
// Using async functions
fetchData().then(data => {
 console.log(data); // "data"
});
// Async arrow function
const getData = async () => {
 return "data";
};

Await Keyword #

Await pauses execution until a Promise is resolved:

async function fetchUser(id) {
 // Wait for the fetch to complete
 const response = await fetch(`/api/users/${id}`);
 const user = await response.json();
 return user;
}
// Without await (for comparison)
function fetchUser(id) {
 return fetch(`/api/users/${id}`)
 .then(response => response.json())
 .then(user => user);
}

Error Handling #

Use try/catch for error handling with async/await:

async function fetchData() {
 try {
 const response = await fetch('/api/data');
 
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 
 const data = await response.json();
 return data;
 } catch (error) {
 console.error('Failed to fetch data:', error);
 throw error; // Re-throw if needed
 }
}
// Using the function
async function main() {
 try {
 const data = await fetchData();
 console.log('Data:', data);
 } catch (error) {
 console.log('Error in main:', error.message);
 }
}

Multiple Async Operations #

Handle multiple async operations efficiently:

// Sequential execution (slower)
async function sequential() {
 const user = await fetchUser(1);
 const posts = await fetchPosts(user.id);
 const comments = await fetchComments(posts[0].id);
 return { user, posts, comments };
}
// Parallel execution (faster)
async function parallel() {
 const [user, posts, comments] = await Promise.all([
 fetchUser(1),
 fetchPosts(1),
 fetchComments(1)
 ]);
 return { user, posts, comments };
}
// Race - returns first resolved promise
async function fastest() {
 const result = await Promise.race([
 fetchFromServer1(),
 fetchFromServer2(),
 fetchFromServer3()
 ]);
 return result;
}
// allSettled - wait for all regardless of success/failure
async function allResults() {
 const results = await Promise.allSettled([
 fetchUser(1),
 fetchUser(2),
 fetchUser(3)
 ]);
 
 results.forEach((result, index) => {
 if (result.status === 'fulfilled') {
 console.log(`User ${index}:`, result.value);
 } else {
 console.log(`User ${index} failed:`, result.reason);
 }
 });
}

Async Iteration #

Process async operations in loops:

// Using for...of with await
async function processUsers(userIds) {
 for (const id of userIds) {
 const user = await fetchUser(id);
 console.log(user);
 }
}
// Using for await...of with async iterables
async function* asyncGenerator() {
 yield await Promise.resolve(1);
 yield await Promise.resolve(2);
 yield await Promise.resolve(3);
}
async function consume() {
 for await (const value of asyncGenerator()) {
 console.log(value);
 }
}
// Parallel processing with map
async function processAllUsers(userIds) {
 const promises = userIds.map(id => fetchUser(id));
 const users = await Promise.all(promises);
 return users;
}

Top-Level Await #

Use await at the top level in modules:

// In ES modules (with "type": "module" in package.json)
const response = await fetch('/api/config');
const config = await response.json();
export const API_URL = config.apiUrl;
export const TIMEOUT = config.timeout;
// Top-level await blocks module loading
// Dependents wait until this module resolves

Best Practices #

Tips for effective async/await usage:

// 1. Always return from async functions
async function good() {
 const data = await fetch('/api/data');
 return data; // Explicit return
}
// 2. Avoid mixing async/await with .then()
// Bad
async function mixed() {
 return await fetch('/api/data').then(r => r.json());
}
// Good
async function clean() {
 const response = await fetch('/api/data');
 return await response.json();
}
// 3. Use Promise.all for independent operations
async function optimized() {
 const [users, products] = await Promise.all([
 fetchUsers(),
 fetchProducts()
 ]);
 return { users, products };
}
// 4. Create utility functions for common patterns
async function withTimeout(promise, ms) {
 const timeout = new Promise((_, reject) =>
 setTimeout(() => reject(new Error('Timeout')), ms)
 );
 return Promise.race([promise, timeout]);
}
// Usage
const data = await withTimeout(fetchData(), 5000);