Asynchronous JavaScript — Promises & Async/Await

The problem synchronous code can't solve

Imagine calling a function to fetch data from a server and having your program freeze until the response arrives. Every scroll, click, and animation would stop, sometimes for seconds. Browsers avoid this by handing off slow tasks, like network requests and timers, to the browser itself, which notifies your JavaScript when they finish, rather than blocking everything in the meantime. This is why setTimeout(fn, 1000) doesn't pause your script for a second, it schedules fn to run later and immediately moves on to the next line. Understanding that JavaScript keeps running while these tasks are pending is the key to understanding everything else in this chapter.

Promises represent a future value

A Promise is an object representing a value that isn't available yet but will be, eventually, either successfully (resolved) or unsuccessfully (rejected). You've already used Promises implicitly through fetch(). You can also create your own with new Promise((resolve, reject) => { ... }), calling resolve(value) when the work succeeds and reject(error) when it fails. Once you have a Promise, .then(onSuccess) runs when it resolves, and .catch(onError) runs when it rejects. Promises can also be chained, since .then() itself returns a new Promise, which is what lets you write fetch(url).then(...).then(...).

1function wait(ms) {2  return new Promise((resolve) => {3    setTimeout(resolve, ms);4  });5}67wait(1000).then(() => console.log("One second has passed"));

async/await: cleaner syntax for the same thing

Chaining many .then() calls together can get hard to read, especially once you add error handling and conditional logic. async/await solves this by letting you write asynchronous code that looks synchronous. Marking a function async means it always returns a Promise, and lets you use the await keyword inside it. await somePromise pauses execution of that function (without freezing the rest of the page) until the promise settles, then gives you the resolved value directly, as if it had returned normally. Errors from a rejected promise show up as regular thrown exceptions, which means you can catch them with a familiar try/catch block instead of chaining .catch().

1async function loadUsers() {2  try {3    const response = await fetch("https://jsonplaceholder.typicode.com/users");4    if (!response.ok) {5      throw new Error(`Request failed with status ${response.status}`);6    }7    const users = await response.json();8    console.log(users.map((u) => u.name));9  } catch (error) {10    console.error("Could not load users:", error.message);11  }12}1314loadUsers();

A common early mistake is forgetting that await only works inside a function marked async, and that calling an async function doesn't block the code that called it, since the async function itself returns a Promise immediately. If you need to run several independent asynchronous operations at the same time rather than one after another, Promise.all([promise1, promise2]) lets you await multiple promises in parallel and get their results back together, once all of them finish. This is much faster than awaiting each one in sequence when they don't depend on each other.

1async function loadDashboard() {2  const [users, posts] = await Promise.all([3    fetch("https://jsonplaceholder.typicode.com/users").then((r) => r.json()),4    fetch("https://jsonplaceholder.typicode.com/posts").then((r) => r.json()),5  ]);6  console.log(users.length, posts.length);7}

• A Promise is either pending, resolved (fulfilled), or rejected
• .then() handles a resolved value, .catch() handles a rejection
• async functions always return a Promise
• await pauses inside an async function until a Promise settles
• Wrap awaited code in try/catch to handle errors
• Promise.all([...]) runs multiple promises concurrently