JavaScript Promises & Async

Synchronous code executes line by line. Each operation blocks until it completes before the next one starts. If a task takes 3 seconds, everything waits.

Asynchronous code lets long-running tasks execute in the background. JavaScript uses an event loop so other code can continue while waiting for I/O, timers, or network requests.

// Synchronous — blocks on each line
console.log("First");
heavyComputation();   // blocks here
console.log("Second"); // waits for above

// Asynchronous — non-blocking
console.log("First");
setTimeout(() => console.log("Second"), 1000);
console.log("Third"); // runs before "Second"!

Click the buttons below to see the difference visually:

A callback is a function passed as an argument to another function, to be executed later when an async operation completes.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data loaded!");
  }, 1000);
}

fetchData(function(result) {
  console.log(result); // "Data loaded!" after 1s
});

Click Start to watch the task queue in action:

A Promise represents a value that may be available now, later, or never. It has three states:

const promise = new Promise((resolve, reject) => {
  // async work...
  if (success) resolve(value);
  else reject(error);
});

promise
  .then(value => console.log(value))
  .catch(error => console.error(error));

Use the buttons to create and control a Promise interactively:

JavaScript provides utility methods to work with multiple Promises:

• Promise.all — resolves when all fulfill, rejects if any rejects
• Promise.race — resolves/rejects with the first settled promise
• Promise.allSettled — waits for all to settle, never rejects

Configure the tasks below, pick a method, and click Run:

async/await is syntactic sugar over Promises. It makes asynchronous code look and behave like synchronous code:

• async keyword before a function makes it return a Promise
• await pauses execution until a Promise settles
• Errors are caught with standard try/catch blocks

Compare the two approaches side by side: