Promise Handling and Async/Await in JavaScript

Master asynchronous operations in JavaScript by learning how to create and handle promises with modern, clean syntax.

⏳

Welcome! Let's see how JavaScript handles tasks that take time, like fetching data from the internet.

/* Preparing for an async journey... */

What is a Promise?

A Promise is a special JavaScript object. It acts as a placeholder for a value that will be available later, representing the eventual result of an asynchronous operation (like fetching data). A promise can be in one of three states: pending, fulfilled, or rejected.

The .then() and .catch() Chain

To handle the outcome, we chain methods to the promise. The .then() method runs when the promise is fulfilled (succeeds), receiving the result. The .catch() method runs if the promise is rejected (fails), receiving the error.

The async/await Syntax

async/await is modern syntax that makes asynchronous code look synchronous and easier to read. The async keyword before a function makes it return a promise. The await keyword pauses the function's execution until a promise resolves.

Error Handling with try...catch

With async/await, we use a standard try...catch block for error handling. You `await` the promise inside the `try` block, and if it's rejected, the code execution jumps to the `catch` block, where you can handle the error gracefully.

Practice Zone

Interactive Test 1: Match the Concepts

Match the asynchronous keyword to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

async

.catch()

.then()

await

Completa el código:

Handles a successful promise result.______

Handles a promise error or rejection.______

Marks a function as asynchronous.______

Pauses execution until a promise resolves.______

Unlock with Premium

Interactive Test 2: Complete the Code

Complete the code to correctly fetch data and handle the response.

Rellena los huecos en cada casilla.

 function fetchData() {
  try {
    const response =  fetch('api/data');
    const data = await response.json();
    console.log(data);
  }  (error) {
    console.error('Fetch failed:', error);
  }
}

Unlock with Premium

Practice Example: Code Editor

Create a promise that resolves after 2 seconds with the message "Data loaded". Use .then() to log the message.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data loaded");
  }, 2000);
});

myPromise.then((message) => {
  console.log(message);
});

Unlock with Premium

Knowledge Check

What keyword is used to pause execution inside an async function until a promise settles?

Unlock with Premium

← Previous Next →

Promises in Action: Real-World Scenarios

Promises are the backbone of modern asynchronous JavaScript. They prevent "callback hell" and enable clean, readable code for tasks like fetching data or handling user events.

1. Fetching API Data

The most common use case for promises is making network requests. The built-in fetch function returns a promise that resolves with the server's response.

async function getUser() {
  try {
    const response = await fetch('https://api.github.com/users/github');
    const user = await response.json();
    console.log(user.name); // GitHub
  } catch (error) {
    console.error('Could not fetch user:', error);
  }
}

getUser();

2. Handling Multiple Promises with "Promise.all"

What if you need data from multiple sources at once? Promise.all() takes an array of promises and returns a new promise that resolves when *all* of them have completed.

const promise1 = fetch(url1).then(res => res.json());
const promise2 = fetch(url2).then(res => res.json());

async function fetchAll() {
  const [data1, data2] = await Promise.all([promise1, promise2]);
  console.log('Both datasets are loaded!');
}

fetchAll();

3. Avoiding "Callback Hell"

Before promises, deeply nested callbacks made code difficult to read and maintain. Promises and `async/await` flatten this structure into a linear, understandable flow.

Old Way (Callbacks)

getData(a, (result1) => {
  getMoreData(result1, (result2) => {
    getEvenMoreData(result2, (result3) => {
      // ... and so on
    });
  });
});

New Way (Async/Await)

async function main() {
  const result1 = await getData(a);
  const result2 = await getMoreData(result1);
  const result3 = await getEvenMoreData(result2);
}

Practical Takeaway: Mastering promises and `async/await` is crucial for building responsive, non-blocking web applications that provide a smooth user experience.

Asynchronous JS Glossary

Promise: An object representing the eventual completion or failure of an asynchronous operation.
resolve(value): A function that is called inside a promise's executor to mark it as fulfilled, passing along the successful result.
reject(error): A function that is called inside a promise's executor to mark it as rejected, passing along the reason for failure.
.then(onFulfilled): A method chained to a promise to schedule a callback function that runs when the promise is fulfilled.
.catch(onRejected): A method chained to a promise to schedule a callback function that runs when the promise is rejected.
async: A keyword used to declare a function that operates asynchronously. Such functions always implicitly return a promise.
await: An operator that can only be used inside an `async` function. It pauses the function execution and waits for a promise to resolve or reject.