Promises | Beginner | Javascript Essentials Tutorial

Introduction to Promises in JavaScript

Promises are a modern way to handle asynchronous operations in JavaScript. This tutorial covers the basics of understanding and using promises, including how to create promises, handle resolved and rejected promises, and chain multiple promises together.

Key Points:

Promises provide a way to handle asynchronous operations.
A promise represents the eventual completion (or failure) of an asynchronous operation.
Promises have three states: pending, fulfilled, and rejected.

Creating a Promise

A promise is created using the Promise constructor, which takes a function with two arguments: resolve and reject. Here is an example:


const myPromise = new Promise((resolve, reject) => {
    const success = true;

    if (success) {
        resolve('Promise resolved successfully');
    } else {
        reject('Promise rejected');
    }
});

myPromise
    .then(result => {
        console.log(result); // Output: Promise resolved successfully
    })
    .catch(error => {
        console.error(error);
    });

Handling Resolved and Rejected Promises

To handle the resolved or rejected state of a promise, you can use the then and catch methods. The then method is called when the promise is resolved, and the catch method is called when the promise is rejected. Here is an example:


const myPromise = new Promise((resolve, reject) => {
    const success = false;

    if (success) {
        resolve('Promise resolved successfully');
    } else {
        reject('Promise rejected');
    }
});

myPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error); // Output: Promise rejected
    });

Chaining Promises

Promises can be chained together to perform multiple asynchronous operations in sequence. Each then method returns a new promise, allowing you to chain multiple then methods together. Here is an example:


const myPromise = new Promise((resolve, reject) => {
    resolve('First promise resolved');
});

myPromise
    .then(result => {
        console.log(result); // Output: First promise resolved
        return 'Second promise resolved';
    })
    .then(result => {
        console.log(result); // Output: Second promise resolved
        return 'Third promise resolved';
    })
    .then(result => {
        console.log(result); // Output: Third promise resolved
    })
    .catch(error => {
        console.error(error);
    });

Promise.all

The Promise.all method takes an array of promises and returns a single promise that resolves when all of the promises in the array have resolved, or rejects if any of the promises in the array are rejected. Here is an example:


const promise1 = Promise.resolve('Promise 1 resolved');
const promise2 = Promise.resolve('Promise 2 resolved');
const promise3 = Promise.resolve('Promise 3 resolved');

Promise.all([promise1, promise2, promise3])
    .then(results => {
        console.log(results); // Output: ["Promise 1 resolved", "Promise 2 resolved", "Promise 3 resolved"]
    })
    .catch(error => {
        console.error(error);
    });

Promise.race

The Promise.race method takes an array of promises and returns a single promise that resolves or rejects as soon as one of the promises in the array resolves or rejects. Here is an example:


const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, 'Promise 1 resolved');
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, 'Promise 2 resolved');
});

Promise.race([promise1, promise2])
    .then(result => {
        console.log(result); // Output: Promise 2 resolved
    })
    .catch(error => {
        console.error(error);
    });

Summary

In this tutorial, you learned about promises in JavaScript, including how to create promises, handle resolved and rejected promises, chain multiple promises together, and use the Promise.all and Promise.race methods. Understanding promises is essential for working with asynchronous operations in modern JavaScript development.

JavaScript Essentials - Promises