Understanding Javascript Promises a Guide to Asynchronous Programming

Asynchronous programming is a must-have in modern JavaScript development, allowing developers to perform non-blocking operations, such as fetching data from a server, reading files, or executing time-consuming operations. JavaScript promises are a powerful feature introduced in ES6 (ECMAScript 2015) to manage asynchronous operations more efficiently and cleanly. This blog post is a guide to JavaScript promises, offering a clear understanding how promises can be used to handle asynchronous tasks in an elegant way.

A Promise in JavaScript is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. A Promise is a proxy for a value that is not necessarily known when the promise is created, this value can be evaluated at some point in the future.

Promises can be in one of three states:

• Pending: The initial state of a promise. The operation has not completed yet.
• Fulfilled: The operation completed successfully, and the promise has a resolved value.
• Rejected: The operation failed, and the promise has a reason for the failure.

To create a promise, you can use the Promise constructor, which has one argument - a function called the executor. The executor function is executed immediately by the Promise implementation and it has two function parameters: resolve and reject callbacks.

javascript
1const promise = new Promise((resolve, reject) => {
2    try {
3        // Execute operation
4        resolve("Operation succeeded");
5    } catch (e) {
6        reject("Operation failed");
7    }
8});

When a promise starts executing it's in the Pending state by default. Later promise must be transferred to either Fulfilled or Rejected state.

resolve callback is used to transfer a promise to Fulfilled state and return a resulting value of the promise as parameter. reject callback is used to transfer a promise to Rejected state and return a failure result of the promise as parameter.

There are 2 ways to get the promise result:

• using then() and catch() functions that hook to the promise
• using async/await statements

To get a result from a promise, you can call then() function for success scenarios and catch() function for handling failures. For example:

javascript
1promise
2    .then(result => {
3        // "Operation succeeded" if successful
4        console.log(result);
5    })
6    .catch(error => {
7        // "Operation failed" if an error occurred
8        console.error(error);
9    });

You can chain these methods to perform additional operations after the previous promise has completed.

javascript
1function firstPromise() {
2    return new Promise((resolve, reject) => {
3        setTimeout(() => {
4            console.log("First promise finished with result: 1");
5            resolve(1);
6        }, 1000);
7    });
8}
9
10function secondPromise(previousResult) {
11    return new Promise((resolve, reject) => {
12        setTimeout(() => {
13            console.log("Second promise finished with result: ", previousResult + 1);
14            resolve(previousResult + 1);
15        }, 1000);
16    });
17}
18
19function thirdPromise(previousResult) {
20    return new Promise((resolve, reject) => {
21        setTimeout(() => {
22            console.log("Third promise finished with result: ", previousResult + 1);
23            resolve(previousResult + 1);
24        }, 1000);
25    });
26}
27
28firstPromise()
29    .then(result => secondPromise(result))
30    .then(result => thirdPromise(result))
31    .then(finalResult => console.log("All promises completed with final result: ", finalResult))
32    .catch(error => console.error("An error occurred:", error));

Here we chain together 3 promises executing one after another. In this example "3" is printed to console as a final result. The final catch() function is called when an error occurs or reject() function is called in any of 3 promises.

Before the invention of Promises performing asynchronous operations anticipated using callbacks. This led to a bad code structure with deeply nested callbacks, especially when using multiple asynchronous operations one after another.

Here is how the previous example will look like when using callbacks:

javascript
1function firstCallback(callback) {
2    setTimeout(() => {
3        console.log("First callback finished with result: 1");
4        callback(1);
5    }, 1000);
6}
7
8function secondCallback(previousResult, callback) {
9    setTimeout(() => {
10        console.log("Second callback finished with result: ", previousResult + 1);
11        callback(previousResult + 1);
12    }, 1000);
13}
14
15function thirdCallback(previousResult, callback) {
16    setTimeout(() => {
17        console.log("Third callback finished with result: ", previousResult + 1);
18        callback(previousResult + 1);
19    }, 1000);
20}
21
22firstCallback(function(result) {
23    secondCallback(result, function(newResult) {
24        thirdCallback(newResult, function(finalResult) {
25            console.log("All callbacks completed with final result: ", finalResult);
26        });
27    });
28});

Doesn't look pretty, right? That's why the invention of promises was a huge step further in asynchronous JavaScript development. But what if I told you - that it's not the best viable option nowadays? Let's explore what is the best option.

async/await statements in JavaScript are a complete game changer in asynchronous development. ES2017 introduced async functions and the await keyword, that allow developers to write asynchronous code that looks and behaves a like synchronous code:

javascript
1async function fetchDataAsync() {
2    try {
3        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
4        const data = await response.json();
5        return data;
6    } catch (error) {
7        console.error("Failed to fetch data: ", error);
8    }
9}
10
11const data = await fetchDataAsync();
12console.log(data);

Here an async function returns a Promise<T>, that holds a data received from the API call. By using await keyword we get this data as a promise result.

After the line const data = await fetchDataAsync(); we can simply write more code as if all operations were executed synchronously. It looks perfect!

Now let's explore how we can update one of the previous examples where we chained 3 promises with a then() function, when using async/await statements:

javascript
1function firstPromise() {
2    return new Promise((resolve, reject) => {
3        setTimeout(() => {
4            resolve(1);
5        }, 1000);
6    });
7}
8
9function secondPromise(previousResult) {
10    return new Promise((resolve, reject) => {
11        setTimeout(() => {
12            resolve(previousResult + 1);
13        }, 1000);
14    });
15}
16
17function thirdPromise(previousResult) {
18    return new Promise((resolve, reject) => {
19        setTimeout(() => {
20            resolve(previousResult + 1);
21        }, 1000);
22    });
23}
24
25try {
26    const firstResult = await firstPromise();
27    console.log("First promise finished with result: ", firstResult);
28
29    const secondResult = await secondPromise(firstResult);
30    console.log("Second promise finished with result: ", secondResult);
31
32    const thirdResult = await thirdPromise(secondResult);
33    console.log("Third promise finished with result: ", thirdResult);
34
35    console.log("All promises completed with final result: ", thirdResult);
36} catch (error) {
37    console.error("An error occurred:", error);
38}

It looks really nice. This code is much more readable and maintainable because of using the async/await statement.

JavaScript promises are a vital feature for performing non-blocking operations, such as fetching data from a server, reading files, or executing time-consuming operations. It offers a more manageable and readable approach compared to old callback-based solutions.

You can use the async/await syntax to write even cleaner and more efficient JavaScript code.

Hope you find this newsletter useful. See you next time.