1. Introduction to Asynchronous Programming
Asynchronous programming in JavaScript allows tasks to run without blocking the main thread. This is crucial for operations like fetching data, reading files, or handling user input while keeping the application responsive.
Challenges in Asynchronous Code
- Callbacks: Managing nested callbacks leads to “callback hell.”
- Promises: Simplified handling with
.then()and.catch()but still required chaining.
async/await: The Modern Solution
Introduced in ES2017, async/await simplifies working with Promises by making asynchronous code look synchronous.
Example: Fetching Data
// With Promises
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log('Data:', data))
.catch(error => console.error('Error:', error));
// With async/await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log('Data:', data);
} catch (error) {
console.error('Error:', error);
}
}
fetchData();
2. Understanding async Functions
An async function is a function that returns a Promise. The async keyword is used to declare these functions.
Key Features
- Automatically wraps return values in a Promise.
- Allows the use of
awaitinside its body.
Example
async function getGreeting() {
return "Hello, World!";
}
// Equivalent to:
function getGreeting() {
return Promise.resolve("Hello, World!");
}
// Usage
getGreeting().then(console.log); // Output: Hello, World!
3. Understanding await Keyword
The await keyword pauses the execution of an async function until the Promise it waits for is resolved or rejected.
Key Rules
- Can only be used inside
asyncfunctions. - Makes code read synchronously but works asynchronously under the hood.
Example
async function delayedMessage() {
console.log('Start');
const message = await new Promise(resolve =>
setTimeout(() => resolve('Hello after 2 seconds'), 2000)
);
console.log(message); // Output: Hello after 2 seconds
}
delayedMessage();
4. Error Handling with async/await
Use try...catch blocks to handle errors in asynchronous code.
Example
async function fetchWithErrorHandling() {
try {
const response = await fetch('https://invalid-api.example.com');
if (!response.ok) throw new Error('Network error');
const data = await response.json();
console.log('Data:', data);
} catch (error) {
console.error('Error:', error.message);
}
}
fetchWithErrorHandling();
// Output: Error: Network error
5. Combining async/await with Other Asynchronous Patterns
Sequential Execution
Use await for dependent tasks.
async function sequentialTasks() {
const step1 = await new Promise(resolve => setTimeout(() => resolve('Step 1'), 1000));
console.log(step1);
const step2 = await new Promise(resolve => setTimeout(() => resolve('Step 2'), 1000));
console.log(step2);
}
sequentialTasks();
// Output: Step 1 -> Step 2 (takes 2 seconds)
Concurrent Execution
Use Promise.all for tasks that can run simultaneously.
async function concurrentTasks() {
const [task1, task2] = await Promise.all([
new Promise(resolve => setTimeout(() => resolve('Task 1'), 1000)),
new Promise(resolve => setTimeout(() => resolve('Task 2'), 1000))
]);
console.log(task1, task2);
}
concurrentTasks();
// Output: Task 1 Task 2 (takes 1 second)
6. Best Practices for async/await
- Use
try...catchfor Error Handling: Wrap critical code to handle errors. - Optimize Performance: Use
Promise.allfor independent tasks. - Avoid Blocking the Event Loop: Offload heavy computations.
Example
async function fetchProfiles(userIds) {
try {
const profiles = await Promise.all(
userIds.map(id => fetch(`https://api.example.com/users/${id}`).then(res => res.json()))
);
console.log('Profiles:', profiles);
} catch (error) {
console.error('Error fetching profiles:', error);
}
}
fetchProfiles([1, 2, 3]);
7. Advanced Use Cases
for await...of for Async Iteration
Iterate over multiple Promises sequentially.
async function fetchMultipleAPIs(urls) {
for await (const url of urls) {
const response = await fetch(url);
const data = await response.json();
console.log('Data:', data);
}
}
fetchMultipleAPIs(['https://api1.com', 'https://api2.com']);
8. Debugging async/await
- Use
console.timefor Performance Monitoring
async function fetchWithTiming() {
console.time('Fetch Time');
const response = await fetch('https://api.example.com/data');
console.timeEnd('Fetch Time');
}
fetchWithTiming();
Enable Stack Traces in Dev Tools Most modern browsers provide stack traces for asynchronous calls.
9. Real-World Examples
Fetching API Data
async function fetchUserData(userId) {
const response = await fetch(`https://api.example.com/users/${userId}`);
const user = await response.json();
console.log('User:', user);
}
fetchUserData(1);
File Operations in Node.js
const fs = require('fs/promises');
async function readFile() {
try {
const data = await fs.readFile('example.txt', 'utf-8');
console.log('File Content:', data);
} catch (error) {
console.error('Error reading file:', error.message);
}
}
readFile();
10. Limitations of async/await
- Blocking the Event Loop Avoid CPU-intensive tasks inside
asyncfunctions.
async function compute() {
let result = 0;
for (let i = 0; i < 1e9; i++) {
result += i;
}
return result;
}
compute().then(console.log);
// Output: Blocks the event loop
Not Suitable for Real-Time Streams For streaming data, use event-driven patterns or for await...of.