Intro to Async/Await0%
Fetching Data from APIs

Intro to Async/Await

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Intro to Async/Await in Modern JavaScript

Introduced in ECMAScript 2017 (ES8), async and await are syntactic sugar built on top of JavaScript Promises. They allow you to write asynchronous code that reads and behaves like synchronous code, eliminating nested .then() callbacks and enabling standard try...catch blocks.

1. The async Keyword

Placing async before a function declaration or arrow function does two things:

  1. 1
    It permits the use of await inside that function.
  2. 2
    It always returns a Promise, automatically wrapping non-promise return values.
JavaScript
async function getGreeting() {
return 'Hello, World!'; // Automatically wrapped in Promise.resolve()
}
 
// Consuming the async function
getGreeting().then(msg => console.log(msg)); // 'Hello, World!'

2. The await Keyword

await can only be used inside async functions (or at the top level of modern ES modules). It pauses execution of the async function until the Promise settles:

JavaScript
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
 
async function runDemo() {
console.log('Step 1: Beginning operation...');
await delay(1000); // Pauses runDemo execution for 1000ms
console.log('Step 2: Resumed after 1 second!');
}
 
runDemo();
Crucial Concept: await does not block the entire browser or main JavaScript thread! It only pauses the execution frame of that specific async function, allowing other events and UI updates to proceed.

3. Comparing Promise Chaining vs. Async/Await

With Promise Chaining (.then/.catch):

JavaScript
function loadDashboard(userId) {
return fetchUserData(userId)
.then(user => fetchUserFeed(user.feedId))
.then(feed => renderFeed(feed))
.catch(err => showError(err));
}

With Modern Async/Await:

JavaScript
async function loadDashboard(userId) {
try {
const user = await fetchUserData(userId);
const feed = await fetchUserFeed(user.feedId);
renderFeed(feed);
} catch (err) {
showError(err);
}
}

4. Sequential vs. Parallel Execution Pitfall

A common beginner mistake is awaiting independent asynchronous tasks sequentially, leading to unnecessary delays:

JavaScript
// SLOW (Sequential): Takes 1000ms + 1000ms = 2000ms
async function loadSlow() {
const profile = await fetchProfile(); // Takes 1s
const analytics = await fetchAnalytics(); // Takes 1s
return { profile, analytics };
}
 
// FAST (Concurrent): Takes max(1000ms, 1000ms) = 1000ms!
async function loadFast() {
// Fire both promises simultaneously
const profilePromise = fetchProfile();
const analyticsPromise = fetchAnalytics();
 
// Await both together
const [profile, analytics] = await Promise.all([profilePromise, analyticsPromise]);
return { profile, analytics };
}
Output
Sequential Execution:
[ Fetch Profile (1s) ] ──► [ Fetch Analytics (1s) ] ===> Total: 2s
 
Concurrent Execution:
[ Fetch Profile (1s) ]
[ Fetch Analytics (1s) ] ===> Total: 1s
Interactive Quiz

Practice Quiz

Question 1
What does an async function always return?
Question 2
What happens if you use the await keyword inside a standard synchronous function?
Question 3
Does await freeze the entire browser window while waiting for a network request?
Question 4
How is error handling typically implemented in async/await functions?
Question 5
How should two independent network requests be awaited to minimize latency?
Next Lesson

Fetching Data from APIs

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Promise ChainingFetching Data from APIs

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext