JavaScript 101: Understanding Promises, Async & Await

JavaScript 101: Understanding Promises, Async & Await

Promises, Async & Await are all related concepts in JavaScript that are used to handle asynchronous operations

Promises, Async & Await are all related concepts in JavaScript that are used to handle asynchronous operations.

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promises provide a way to register callbacks to be called when the async operation completes or fails.

Promises have three states:

  • Pending: The initial state, neither fulfilled nor rejected.

  • Fulfilled: This means that the operation was completed successfully.

  • Rejected: This means that the operation failed.

Here is an example of a basic promise:

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Hello from myPromise!");
    }, 1000);
});

myPromise.then(console.log);

This promise will log "Hello from myPromise!" after one second.

Async & Await are JavaScript keywords that are used to handle promises. The async keyword defines an asynchronous function, which returns a promise. The await keyword is used to wait for a promise to be resolved before moving on to the next line of code.

Here is an example of an asynchronous function using async & await:

async function myAsyncFunction() {
    const myPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Hello from myAsyncFunction!");
        }, 1000);
    });
    const result = await myPromise;
    console.log(result);
}

myAsyncFunction();

This function will log "Hello from myAsyncFunction!" after one second.

Note: The await keyword can only be used within an async function.

In summary, Promises provide a way to handle async operations, and Async & Await provides a more straightforward way to handle promises, allowing you to write async code that looks and behaves like sync code.

I'd love to connect with you via Twitter & LinkedIn

Happy hacking!