Asynchronous JavaScript Patterns

Introduction: Moving From Sync To Async

In our previous lessons, we explored the world of Symbols and Generators . We learned how to build lazy pipelines that process data only when we ask for it. While those pipelines are powerful, they are usually synchronous . This means the computer performs each step of the calculation immediately, one after another, without waiting for outside forces. However, in real-world programming, we often have to deal with tasks that take an unpredictable amount of time. You might need to fetch a user's profile from a database, download an image from a website, or simply wait for a specific amount of time to pass. If we handled these tasks synchronously, our entire program would "freeze" until the task finished. To keep our applications smooth and responsive, we use Asynchronous JavaScript . In this lesson, we will learn how to manage these time-based tasks using Promises and the modern async/await syntax.

Creating Promises With Resolve And Reject

The foundation of asynchronous JavaScript is the Promise . You can think of a Promise as a placeholder for a value that does not exist yet but will be available in the future. When we create a new Promise, we provide a function that tells the Promise how to behave. This function receives two special tools: resolve and reject . We call resolve when a task finishes successfully, passing along the result. We call reject if something goes wrong, passing along an error. Let’s look at two helper functions that use the setTimeout timer to simulate these outcomes. The delay function creates a Promise that succeeds after a few milliseconds, while the fail function creates a Promise that intentionally fails. JavaScript const delay = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms)); const fail = (ms, reason) => new Promise((_, reject) => setTimeout(() => reject(new Error(reason)), ms)); const delay = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms)); const fail = (ms, reason) => new Promise((_, reject) => setTimeout(() => reject(new Error(reason)), ms)); In the delay function, we pass the ms (milliseconds) to setTimeout . Once that time passes, the code inside runs and calls resolve(value) . This "fulfills" the Promise with the data we provided. In the fail function, we use the second argument of the Promise constructor, which is reject . After the time passes, it creates a new Error object and rejects the Promise, signaling that the operation failed.

Consuming Promises With .then() and .catch()

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JavaScript

const delay = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));

const fail = (ms, reason) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(reason)), ms));

JavaScript

delay(10, "Hello World")
  .then((result) => {
    console.log("Success:", result);
  })
  .catch((error) => {
    console.error("Failure:", error.message);
  });

delay(10, "Hello World")
  .then((result) => {
    console.log("Success:", result);
  })
  .catch((error) => {
    console.error("Failure:", error.message);
  });

JavaScript

(async () => {
  const result = await delay(10, "Hello World");
  console.log(result);
})();

(async () => {
  const result = await delay(10, "Hello World");
  console.log(result);
})();

JavaScript

(async () => {
  const a = await delay(10, "A");
  const b = await delay(10, "B");
  console.log("sequential:", a, b);
})();

(async () => {
  const a = await delay(10, "A");
  const b = await delay(10, "B");
  console.log("sequential:", a, b);
})();

text

sequential: A B

JavaScript

(async () => {
  const allResults = await Promise.all([delay(10, 1), delay(20, 2)]);
  console.log("all:", allResults);

  const settled = await Promise.allSettled([
    delay(5, "ok"),
    fail(10, "boom"),
  ]);
  console.log("settled:", settled.map((s) => s.status));
})();

(async () => {
  const allResults = await Promise.all([delay(10, 1), delay(20, 2)]);
  console.log("all:", allResults);

  const settled = await Promise.allSettled([
    delay(5, "ok"),
    fail(10, "boom"),
  ]);
  console.log("settled:", settled.map((s) => s.status));
})();

text

all: [ 1, 2 ]
settled: [ 'fulfilled', 'rejected' ]

all: [ 1, 2 ]
settled: [ 'fulfilled', 'rejected' ]

JavaScript

(async () => {
  console.log("race:", await Promise.race([delay(20, "slow"), delay(5, "fast")]));
  console.log("any:",  await Promise.any([fail(5, "x"), delay(10, "winner")]));
})();

(async () => {
  console.log("race:", await Promise.race([delay(20, "slow"), delay(5, "fast")]));
  console.log("any:",  await Promise.any([fail(5, "x"), delay(10, "winner")]));
})();

text

race: fast
any: winner

race: fast
any: winner

Combinator	Resolves When	Rejects When	Returns	Use Case
`Promise.all`	All fulfill	Any rejects	Array of values	Independent tasks that all must succeed.
`Promise.allSettled`	All settle	Never	Array of state objects	Gathering results regardless of success/failure.
`Promise.race`	Any settles	Any settles	First value or error	Implementing timeouts or simple races.
`Promise.any`	Any fulfills	All reject	First success value	Redundant sources where any success is fine.

JavaScript

(async () => {
  try {
    await fail(5, "nope");
  } catch (e) {
    console.log("caught:", e.message);
  }
})();

(async () => {
  try {
    await fail(5, "nope");
  } catch (e) {
    console.log("caught:", e.message);
  }
})();

JavaScript

delay(10, "Hello World")
  .then((result) => {
    console.log("Success:", result);
  })
  .catch((error) => {
    console.error("Failure:", error.message);
  });

JavaScript

(async () => {
  const result = await delay(10, "Hello World");
  console.log(result);
})();

JavaScript

(async () => {
  const a = await delay(10, "A");
  const b = await delay(10, "B");
  console.log("sequential:", a, b);
})();

text

sequential: A B

JavaScript

(async () => {
  const allResults = await Promise.all([delay(10, 1), delay(20, 2)]);
  console.log("all:", allResults);

  const settled = await Promise.allSettled([
    delay(5, "ok"),
    fail(10, "boom"),
  ]);
  console.log("settled:", settled.map((s) => s.status));
})();

text

all: [ 1, 2 ]
settled: [ 'fulfilled', 'rejected' ]

JavaScript

(async () => {
  console.log("race:", await Promise.race([delay(20, "slow"), delay(5, "fast")]));
  console.log("any:",  await Promise.any([fail(5, "x"), delay(10, "winner")]));
})();

text

race: fast
any: winner

JavaScript

(async () => {
  try {
    await fail(5, "nope");
  } catch (e) {
    console.log("caught:", e.message);
  }
})();

Introduction: Moving From Sync To Async

Creating Promises With Resolve And Reject

Consuming Promises With .then() and .catch()

Join the 1M+ learners on CodeSignal

Async Functions And The Await Keyword

Sequential Execution With Await

Promise.all And Promise.allSettled

Promise.race And Promise.any

Comparing Combinators

Handling Errors With Try/Catch

Summary And Practice Preview