Master asynchronous operations with promises, chaining methods, async/await syntax, and parallel combinators.
Promise instances to manage deferred asynchronous values.then(), catch(), and finally() handlers to process values.async and await for synchronous-looking promise code.Promise.all() to prevent blocking call pipelines.Promise.allSettled() when you need results from all operations, including individual rejections.then() block breaks the promise chaining sequence.Promise.all() rejects the entire collection immediately without waiting.new Promise()Constructs a promise wrapper by passing resolve and reject callback handles.
const p = new Promise((resolve, reject) => {
if (success) resolve(data);
else reject(new Error("Failed"));
});Promise.resolve()Returns an already-fulfilled promise containing the supplied argument.
Promise.resolve(42)
.then(val => console.log(val));Promise.reject()Returns an already-rejected promise containing the supplied error reason.
Promise.reject(new Error("Failed"))
.catch(err => console.error(err));.then()Attaches a fulfillment handler to react when a promise resolves.
promise.then(result => {
console.log("Resolved:", result);
});.catch()Attaches a rejection handler to catch errors thrown in chains.
promise.catch(error => {
console.error("Caught error:", error);
});.finally()Attaches a callback that executes regardless of success or failure outcomes.
promise.finally(() => {
console.log("Operation completed");
});Chaining .then()Passes the return value of each handler to the next link.
fetch("/api/users/1")
.then(res => res.json())
.then(user => console.log(user.name))
.catch(err => console.error(err));Sequential waitingReturns a new promise inside then to pause subsequent step execution.
getUser(id)
.then(user => getOrders(user.id))
.then(orders => console.log(orders));Error recoveryAttaches a catch block to supply fallback values and continue chaining.
fetch("/api/data")
.catch(() => getCachedData())
.then(data => render(data));Promise.all()Waits for all promises to resolve, rejecting instantly if any fail.
const [a, b] = await Promise.all([p1, p2]);Promise.race()Returns the result of the first promise to settle, resolving or rejecting.
const fastest = await Promise.race([p1, p2]);Promise.any()Returns the first successfully resolved promise, ignoring rejections.
const firstOk = await Promise.any([p1, p2]);Promise.allSettled()Waits for all promises to settle and returns their status array.
const results = await Promise.allSettled([p1, p2]);Parallel executionInitiates independent promises simultaneously to speed up total execution times.
const p1 = fetchUser();
const p2 = fetchPosts();
const [user, posts] = await Promise.all([p1, p2]);Promisifying callbacksWraps a legacy callback function like setTimeout in a promise.
const delay = ms => {
return new Promise(r => setTimeout(r, ms));
};
await delay(1000);Instantiate a new Promise((resolve, reject) => { ... }) wrapper. Call the resolve callback upon success. Invoke the reject callback with an error object if the operation fails.
Each await statement blocks execution until that specific promise settles. Sequentially awaiting independent operations increases execution times. Wrap them in Promise.all() to trigger parallel execution.
Unhandled rejections can crash Node.js processes or trigger console warnings in browsers. Always attach a .catch() block. Alternatively, wrap your asynchronous expressions in try-catch structures.
Promise.race() resolves or rejects as soon as the first input promise settles. Promise.any() waits for the first successful resolution, ignoring intermediate rejections. It throws an AggregateError if all fail.
No, a forEach loop is not designed to await asynchronous callbacks. The loop completes before the async callbacks finish executing. Use a standard for...of loop to ensure sequential execution.
Parallel Dashboard Resource Fetching
Loads user profiles and order histories concurrently using parallel fetch requests to minimize user interface load delay.
Promise.all to await their concurrent completion.try-catch wrapper.async function getDashboardData(userId) {
try {
const userPromise = fetch(`/users/${userId}`);
const ordersPromise = fetch(`/orders/${userId}`);
const [userRes, ordersRes] = await Promise.all([
userPromise,
ordersPromise
]);
return {
user: await userRes.json(),
orders: await ordersRes.json()
};
} catch (err) {
console.error("Dashboard failed to load", err);
return null;
}
}Use Promise.all() to trigger independent requests concurrently, significantly reducing response wait times.