Async and Await
Read a later report result in a clear sequence
A school report needs to receive marks, calculate their total and display it. A promise chain can express this, but a sequence inside one function can be easier to follow.
In JavaScript, an async function always returns a promise. await pauses that function’s continuation until the awaited value settles. Other eligible work can continue; the entire runtime is not paused.
Trace continuation
Predict what runs before and after await.
Catch rejection
Handle failure around the awaited operation.
Choose sequencing
Distinguish dependent work from independent operations.
Suspend this function, then resume with its result
Start function
Run until the awaited result.
LoadingCaller continues
The function returns a pending promise.
Screen readyResume function
Use settled marks and return the total.
75
await works inside a promise-returning function
The async declaration changes the function’s return contract. Even return 75 produces a promise fulfilled with 75. Calling an async function is therefore different from receiving its completed numeric result.
When awaited work rejects, await throws that rejection into the async function. A surrounding try/catch can handle it; otherwise the function’s returned promise rejects and its caller must handle the failure.
Before starting, review promise results and rejection. These examples use JavaScript; other languages can use different syntax and rules.
Trace an async report from start to completion
Calling showReport prints Loading before reaching await. Although the local promise is fulfilled already, continuation happens later. The caller prints Screen ready, then the function resumes and prints 75.
This local example performs no network I/O. The syntax still demonstrates exactly where the function suspends and resumes.
JavaScript · local teaching example
async function showReport() {
console.log("Loading");
const marks = await Promise.resolve([40, 35]);
console.log(marks[0] + marks[1]);
}
showReport();
console.log("Screen ready");Expected output
Loading
Screen ready
75Catch the failure where the awaited operation runs
The rejected local result throws at await. The catch branch prints its reason, and the success message is skipped. A caller should still handle unexpected failure from functions that can reject.
JavaScript · local teaching example
async function showReport() {
try {
const report = await Promise.reject(new Error("Report unavailable"));
console.log(report);
} catch (error) {
console.log(error.message);
}
}
showReport();Expected output
Report unavailableStart independent operations before waiting for both
Names and marks are independent in this local example. The promises are created before Promise.all waits for both, and the returned array preserves input order.
Real requests should be started in the same place when they are independent. Promise.all rejects if one input rejects and does not automatically cancel the other operation.
JavaScript · local teaching example
async function showStudent() {
const nameRequest = Promise.resolve("Maya");
const markRequest = Promise.resolve(35);
const [name, mark] = await Promise.all([nameRequest, markRequest]);
console.log(name + ": " + mark);
}
showStudent();Expected output
Maya: 35Apply the rule to a small change
Create an async total function, then await its result in a caller before displaying it.
Worked answer
total returns a promise fulfilled with 75. The caller awaits that promise to receive the number, so console.log displays 75 rather than a promise object.
JavaScript · local teaching example
async function total(maths, science) {
return maths + science;
}
async function display() {
const result = await total(40, 35);
console.log(result);
}
display();Expected output
75Recognize mistakes and limits
An async function runs synchronously until its first suspension. A large loop before await still blocks the current thread; adding async to its declaration does not relocate the computation.
Use sequential awaits when the second operation needs the first result. Start independent work together when appropriate, while respecting resource limits and service policies.
Handle the returned promise at the call site when failure can escape. Await syntax does not remove failures, add a timeout or make every operation cancellable. Top-level await is available in supported modules, not ordinary classic scripts.
For the language or tool rules used here, see JavaScript promise chaining and timing.
Check the core idea
Apply the idea to a new situation
JavaScript · code for this question
async function showReport() {
console.log("Loading");
const marks = await Promise.resolve([40, 35]);
console.log(marks[0] + marks[1]);
}
showReport();
console.log("Screen ready");Read the sequence and keep the promise contract
async and await express eventual work as a readable function sequence. Trace suspension, handle rejection and decide whether operations are dependent before choosing how to wait.
Connect this idea with timeouts and stale responses and clear returned-result contracts.
Reaching the recap and completing the quizzes are separate milestones.