The JavaScript runtime engine makes it a synchronous programming language where programs run sequentially. Programming languages that are not synchronous are called asynchronous programming languages, which are programming languages where programs run concurrently.

Although JavaScript is synchronous, you can perform asynchronous programming with it. In this article, you will learn about asynchronous programming in JavaScript and how to use it.

What is Asynchronous Programming?

Asynchronous programming is a technique that allows your program to run its tasks concurrently. You can compare asynchronous programming to a chef with multiple cookers, pots, and kitchen utensils. This chef will be able to cook various dishes at a time.

Asynchronous programming makes your JavaScript programs run faster, and you can perform asynchronous programming with any of these:

• Callbacks

• Promises

• Async/Await

In the upcoming sections, you will learn about these techniques and how to use them.

Callbacks

A callback is a function used as an argument in another function. Callbacks allow you to create asynchronous programs in JavaScript by passing the result of a function into another function.

function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

function displayGreeting(callback) {
    let name = prompt("Please enter your name");
    callback(name);
};

displayGreeting(greet);

In the code above, the greet function is used to log a greeting to the console, and it needs the name of the person to be greeted.

The displayGreeting function gets the person's name and has a callback that passes the name as an argument to the greet function while calling it. Then the displayGreeting function is called with the greet function passed to it as an argument.

Callback hell

Although callbacks make it easy to control and make your program asynchronous, you'll eventually run into a problem called callback hell while using them.

This problem arises when you perform multiple asynchronous tasks with callbacks, which might result in nesting callbacks in callbacks.

Here's an example:

function greet(callback) {
    setTimeout(function() {
        console.log("Hi Musab");
        callback();
    }, 1000);
}

function introduce(callback) {
    setTimeout(function() {
        console.log("I am your academic advisor");
        callback();
    }, 1000);
}

function question(callback) {
    setTimeout(function() {
        console.log("Are you currently facing any challenge in your academics");;
        callback();
    }, 1000);
}

// callback hell
greet(function() {
    introduce(function() {
        question(function() {
            console.log("Done");
        });
    });
});

In the code above, the greet, introduce, and question functions are nested to create a callback hell, which makes error handling difficult. You should change your asynchronous programming technique from callbacks to Promise to avoid the callback hell.

Promise

Most programs consist of a producing code that performs a time-consuming task and a consuming code that needs the result of the producing code.

A Promise links the producing and the consuming code together. In the example below, the displayGreeting function is the producing code while the greet function is the consuming code.

let name;

// producing code
function displayGreeting(callback) {
    name = prompt("Please enter your name");
}

// consuming code
function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

In the example below, the new Promise syntax creates a new Promise, which takes a function that executes the producing code. The function either resolves or rejects its task and assigns the Promise to a variable named promise.

If the producing code resolves, its result will be passed to the consuming code through the .then handler.

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
}

let promise = new Promise(function(resolve, reject) {
    // the producing code
    displayGreeting();
    resolve(name)
});

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

promise.then(
    // the consuming code
    result => greet(result),
    error => alert(error)
);

You can convert the previous callback hell's example to a promise by returning a promise from each function and chaining the function calls together with the .then handler.

You can also use the .catch handler to catch any error thrown during the function execution.

function greet() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Hi Musab");
            resolve();
        }, 1000);
    });  
}

function introduce() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("I am your academic advisor");
            resolve();
        }, 1000);
    });
}

function question() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Are you currently facing any challenge in your academics");;
            resolve();
        }, 1000);
    });
}

greet()
    .then(() => introduce())
    .then(() => question())
    .then(() => console.log("Done"))
    .catch(error => console.error("An error occured: ", error));

What are the States of a Promise in JavaScript?

A promise can be in any of these three states:

• Pending: This is the initial state of the promise and its state while it's still running.

• Fulfilled: This is the state of the promise when it resolves successfully.

• Rejected: This is the state of the promise when errors make it not to be resolved.

Async/Await

async/await is syntactic sugar for creating a Promise — it makes creating promises easier.

To make a function asynchronous using async/await, you have to write the async keyword before the function declaration. Then, you can write the await keyword before the producing code's execution call.

Here's an example:

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
    return name;
}

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

async function greeting() {
    // the producing code
    let result = await displayGreeting();
    // the consuming code
    greet(result);
};

greeting();

In the example above, the producing code is the displayGreeting function, and the consuming code is the greet function. The greeting function is the Promise that connects the producing and the consuming code. It waits for the result returned from the displayGreeting function and passes that result to the greet function.

Error Handling in Async/Await

You can easily handle errors that arise when you perform asynchronous operations with async/await using the try...catch statement. The asynchronous operation executes in the try block, and you can handle errors in the catch block.

That is:

async function greeting() {
    try {
        let result = await displayGreeting();
        greet(result);
    } catch(err) {
        console.error(err)
    }
};

Conclusion

Asynchronous programming in JavaScript is used to make tasks in a program run concurrently and uses techniques such as callbacks, Promise, or async/await.

This article explains how to use these asynchronous programming techniques and how to handle errors with them.

You can check the promises and async/await section on the JavaScript.info website to learn more about asynchronous programming in JavaScript.

As web applications become more sophisticated, the need to handle asynchronous operations efficiently becomes crucial. Asynchronous JavaScript allows you to execute code without blocking the main thread, ensuring a smoother user experience.

Promises are a powerful tool in JavaScript for managing asynchronous operations, providing a cleaner and more organized approach to handling asynchronous code.

Here's what we'll cover:

1. What is asynchronous JavaScript?
2. The need for promises
3. What is callback hell?
4. How to create a promise
5. How to consume promises with .then() and .catch()
6. How to chain promises with .then()
7. More complex examples of promise chaining
8. How to handle errors with .catch()
9. Error handling in more detail
10. Async/await in JavaScript
11. Alternative asynchronous programming methods
12. Conclusion

What is Asynchronous JavaScript?

JavaScript is single-threaded, meaning it can only execute one operation at a time. However, in web development, there are tasks that take time to complete, such as fetching data from an API, reading a file, or waiting for a user input. If these tasks were executed synchronously, they would block the main thread, making the user interface unresponsive.

Asynchronous JavaScript allows you to execute code without waiting for the completion of time-consuming tasks. Instead of blocking the main thread, these tasks are delegated to the browser's background processes, and once completed, a callback function is triggered to handle the result.

The Need for Promises

Before Promises, developers used callbacks to handle asynchronous operations. Callbacks are functions passed as arguments to other functions, and they are executed once the asynchronous operation is completed.

While callbacks serve their purpose, they often lead to a phenomenon known as "callback hell" – a situation where multiple nested callbacks make the code hard to read and maintain.

Callback hell arises when asynchronous operations depend on the results of other asynchronous operations, creating deeply nested callback functions. This can make the code difficult to follow, debug, and maintain.

Promises were introduced to address this issue and provide a more elegant solution to asynchronous code.

What is Callback Hell?

Callback hell, also known as the "pyramid of doom," occurs when you have multiple nested callbacks within your code. Each level of nesting represents a subsequent asynchronous operation that depends on the result of the previous one. Here's a simplified example:

getData(function (data) {
  processData(data, function (processedData) {
    updateUI(processedData, function () {
      // More nested callbacks...
    });
  });
});

As you can see, as the number of asynchronous operations increases, the code indentation deepens, leading to a less readable and maintainable codebase.

Promises provide a way to mitigate callback hell by offering a cleaner and more structured approach to handling asynchronous code.

How to Create a Promise

Let's dive into the basics of creating a promise. The Promise constructor takes a function as its argument, which has two parameters: resolve and reject. These parameters are functions that you call to indicate the completion or failure of the asynchronous operation.

// Creating a Promise that resolves to success
const successPromise = new Promise((resolve, reject) => {
  // Simulating a successful asynchronous operation
  const success = true;

  if (success) {
    resolve("Operation completed successfully");
  } else {
    reject("Operation failed");
  }
});

// Creating a Promise that resolves to an error
const errorPromise = new Promise((resolve, reject) => {
  // Simulating a failed asynchronous operation
  const success = false;

  if (success) {
    resolve("Operation completed successfully");
  } else {
    reject("Operation failed");
  }
});

In the successPromise, the asynchronous operation is simulated to be successful, and resolve is called with the success message. In the errorPromise, the operation is simulated to fail, and reject is called with the error message.

How to Consume Promises with .then() and .catch()

Once a promise is created, you can consume its result using the .then() and .catch() methods. The .then() method is used when the promise is fulfilled, and the .catch() method is used when the promise is rejected.

// Consuming the successPromise
successPromise
  .then((result) => {
    console.log(result); // Output: Operation completed successfully
  })
  .catch((error) => {
    console.error(error); // This won't be executed
  });

// Consuming the errorPromise
errorPromise
  .then((result) => {
    console.log(result); // This won't be executed
  })
  .catch((error) => {
    console.error(error); // Output: Operation failed
  });

In the example above, the .then() method logs the success message for successPromise and the error message for errorPromise. The .catch() method handles errors for both Promises.

How to Chain Promises with .then()

One of the powerful features of promises is the ability to chain them together using the .then() method. This is especially useful when you have multiple asynchronous operations that depend on each other.

const firstPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("First operation completed");
  }, 1000);
});

const secondPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Second operation completed");
  }, 500);
});

const thirdPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Third operation completed");
  }, 800);
});

firstPromise
  .then((result) => {
    console.log(result); // Output: First operation completed
    return secondPromise;
  })
  .then((result) => {
    console.log(result); // Output: Second operation completed
    return thirdPromise;
  })
  .then((result) => {
    console.log(result); // Output: Third operation completed
  });

In this example, the second and third promises are chained to the first one using the return statement inside the .then() callbacks. This ensures that each promise waits for the completion of the previous one before executing.

More Complex Examples of Promise Chaining

Let's explore more complex examples of promise chaining to demonstrate how it can be applied in real-world scenarios.

Example 1: Fetching User Data and Posts

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    // Simulating fetching user data from an API
    setTimeout(() => {
      const userData = { id: userId, username: 'john_doe' };
      resolve(userData);
    }, 1000);
  });
}

function fetchUserPosts(userId) {
  return new Promise((resolve, reject) => {
    // Simulating fetching user posts from an API
    setTimeout(() => {
      const posts = [
        { id: 1, title: 'Post 1' },
        { id: 2, title: 'Post 2' },
      ];
      resolve(posts);
    }, 800);
  });
}

// Chaining promises to fetch user data and posts sequentially
fetchUserData(123)
  .then((userData) => {
    console.log(userData); // Output: { id: 123, username: 'john_doe' }
    return fetchUserPosts(userData.id);
  })
  .then((userPosts) => {
    console.log(userPosts); // Output: [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }]
  })
  .catch((error) => {
    console.error('Error:', error);
  });

In this example, two asynchronous operations (fetchUserData and fetchUserPosts) are chained to fetch user data and posts sequentially.

Example 2: Processing Data with Multiple Steps

function processData(data) {
  return new Promise((resolve, reject) => {
    // Simulating data processing
    setTimeout(() => {
      const processedData = data.map((item) => item * 2);
      resolve(processedData);
    }, 500);
  });
}

function displayData(data) {
  return new Promise((resolve, reject) => {
    // Simulating displaying data
    setTimeout(() => {
      console.log(data); // Output: [2, 4, 6, 8, 10]
      resolve('Data displayed successfully');
    }, 300);
  });
}

// Chaining promises to process and display data sequentially
const originalData = [1, 2, 3, 4, 5];
processData(originalData)
  .then((processedData) => {
    console.log(processedData); // Output: [2, 4, 6, 8, 10]
    return displayData(processedData);
  })
  .then((result) => {
    console.log(result); // Output: Data displayed successfully
  })
  .catch((error) => {
    console.error('Error:', error);
  });

In this example, two asynchronous operations (processData and displayData) are chained to process and display data sequentially.

How to Handle Errors with .catch()

When working with asynchronous operations, handling errors is crucial. Promises make error handling more manageable by providing the .catch() method, which is used to catch any errors that occur during the Promise chain.

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

    if (success) {
      resolve("Operation completed successfully");
    } else {
      reject("Operation failed");
    }
  }, 1000);
});

errorPromise
  .then((result) => {
    console.log(result); // This won't be executed
  })
  .catch((error) => {
    console.error(error); // Output: Operation failed
  });

In this example, since the success variable is set to false, the promise is rejected, and the .catch() method is invoked with the reason for failure.

Error Handling in More Detail

While the previous examples touched on error handling, let's delve deeper into the techniques for handling errors with promises.

Using Try-Catch Blocks

You can use try-catch blocks to handle errors within the asynchronous operations themselves.

function fetchData() {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      resolve(data);
    } catch (error) {
      reject(`Error fetching data: ${error.message}`);
    }
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

In this example, the try block attempts to fetch data, checks if the response is okay, and then proceeds to parse it as JSON. If any error occurs within the try block, the catch block is executed, and the error is passed to the reject function.

Using the .catch() Method

You can also use the .catch() method at the end of the promise chain to handle errors that may occur at any stage.

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

This approach is particularly useful when you want to handle errors globally for a sequence of asynchronous operations.

Handling Errors in Promise Chaining

When chaining Promises, it's important to handle errors at each step of the chain. Here's an example demonstrating error handling in a Promise chain:

function stepOne() {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve('Step One completed');
      } else {
        reject('Step One failed');
      }
    }, 500);
  });
}

function stepTwo(data) {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      const success = false;
      if (success) {
        resolve(`Step Two completed with data: ${data}`);
      } else {
        reject('Step Two failed');
      }
    }, 300);
  });
}

function stepThree(result) {
  return new Promise((resolve) => {
    // Simulating an asynchronous operation
    setTimeout(() => {
      resolve(`Step Three completed with result: ${result}`);
    }, 200);
  });
}

stepOne()
  .then((data) => stepTwo(data))
  .then((result) => stepThree(result))
  .then((finalResult) => {
    console.log(finalResult); // This won't be executed in case of any rejection in the chain
  })
  .catch((error) => {
    console.error('Error in Promise chain:', error);
  });

In this example, if any step in the chain encounters an error (either in the asynchronous operation or due to conditional logic), the catch block at the end of the chain will handle the error.

Async/Await in JavaScript

Async/await is a syntactic sugar introduced in ECMAScript 2017 (ES8) that simplifies the handling of asynchronous code. It provides a more readable and synchronous-like structure, making it easier for developers to work with asynchronous operations.

How it Works:

• The async keyword is used to define an asynchronous function. This function always returns a Promise.
• The await keyword is used within the async function to pause its execution until the Promise is resolved. It allows you to work with Promises in a more synchronous manner.

Example:

// Asynchronous function using async/await
async function fetchData() {
  try {
    // Simulating an asynchronous operation, like fetching data from an API
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

    // Once the Promise is resolved, the code below will execute
    let data = await response.json();

    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Calling the async function
fetchData();

So what's this code doing?

1. The fetchData function is declared as async, indicating that it contains asynchronous operations.
2. Inside the function, await fetch(...) is used to make an asynchronous request to a URL, and the function pauses until the request is complete.
3. After the response is received, await response.json() is used to extract the JSON data from the response.
4. The try block handles successful execution, and the data is logged to the console.
5. If any error occurs during the asynchronous operations, the catch block handles the error.

Now, let's discuss the pros and cons of async/await.

Pros of async/await

1. Readability and Simplicity:

Async/await syntax makes asynchronous code look similar to synchronous code, improving readability and making it easier for developers to understand.

// Using Promises
function fetchData() {
  return fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

2. Error Handling:

Async/await simplifies error handling by allowing the use of traditional try-catch blocks, making it more intuitive to manage errors within asynchronous functions.

// Using Promises
function fetchData() {
  return fetch('https://api.example.com/data')
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

3. Sequential Execution:

Async/await allows developers to write asynchronous code in a more sequential manner, which can be easier to reason about and debug.

// Using Promises
function fetchDataSequentially() {
  fetchUserData()
    .then((userData) => fetchUserPosts(userData.id))
    .then((userPosts) => processPosts(userPosts))
    .then((result) => displayResult(result))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchDataSequentially() {
  try {
    const userData = await fetchUserData();
    const userPosts = await fetchUserPosts(userData.id);
    const result = await processPosts(userPosts);
    displayResult(result);
  } catch (error) {
    console.error(error);
  }
}

Cons of async/await

1. No Built-In Timeout:

Async/await doesn't have built-in support for setting a timeout on asynchronous operations. If you need to implement a timeout, you might need to use a combination of Promise.race() and setTimeout.

async function fetchDataWithTimeout() {
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Timeout exceeded')), 5000);
  });

  try {
    const response = await Promise.race([fetch('https://api.example.com/data'), timeoutPromise]);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

2. Sequential Execution vs. Parallelism:

While async/await facilitates writing sequential code, it may not be ideal for scenarios where you want parallel execution of independent asynchronous tasks. In such cases, promises and Promise.all() may be more suitable.

// Using Promises and Promise.all()
function fetchAndProcessData() {
  const userDataPromise = fetchUserData();
  const

userPostsPromise = fetchUserPosts();

  Promise.all([userDataPromise, userPostsPromise])
    .then(([userData, userPosts]) => processAndDisplayData(userData, userPosts))
    .catch((error) => console.error(error));
}

// Using Async/Await
async function fetchAndProcessData() {
  try {
    const userData = await fetchUserData();
    const userPosts = await fetchUserPosts();
    processAndDisplayData(userData, userPosts);
  } catch (error) {
    console.error(error);
  }
}

3. Potential for Unhandled Promise Rejections:

Async/await may lead to unhandled promise rejections if not used with care. For instance, forgetting to use try-catch blocks or not chaining .catch() at the end of an async function might result in unhandled promise rejections.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

fetchData(); // Unhandled promise rejection if fetch fails

To mitigate this, make sure you implement proper error handling in all async functions.

Using the .catch() Method

You can also use the .catch() method at the end of the promise chain to handle errors that may occur at any stage.

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

This approach is particularly useful when you want to handle errors globally for a sequence of asynchronous operations.

Alternative Asynchronous Programming Methods

While Promises are a popular and powerful tool for asynchronous programming, it's worth mentioning other methods that developers might encounter or choose to use.

Async/Await Syntax

As we talked about in the previous section, async/await provides a syntactic sugar on top of promises, making asynchronous code appear more synchronous and readable.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

In this example, the async keyword is used to define an asynchronous function, and the await keyword is used to wait for the resolution of the fetch operation and the subsequent json conversion.

Web Workers

Web Workers are a different approach to handling concurrency in JavaScript. They allow you to run scripts in the background, separate from the main thread, to perform tasks without affecting the user interface's responsiveness.

While Web Workers don't directly replace promises, they provide an alternative way to achieve parallelism and handle computationally intensive tasks asynchronously.

// Inside a web worker script (worker.js)
self.addEventListener('message', (event) => {
  const data = event.data;
  const result = processData(data);
  self.postMessage(result);
});

// In the main script
const worker = new Worker('worker.js');

worker.addEventListener('message', (event) => {
  const result = event.data;
  console.log(result);
});

const dataToSend = [1, 2, 3, 4, 5];
worker.postMessage(dataToSend);

In this example, a Web Worker script (worker.js) processes data and sends the result back to the main script. Web Workers are a powerful tool for parallelizing tasks and offloading work from the main thread.

Conclusion

Promises offer a clean and organized way to handle asynchronous code in JavaScript, addressing issues such as callback hell and providing a more readable syntax for asynchronous operations.

By understanding the basics of promises, chaining them together, handling errors, and exploring advanced concepts, you can enhance your ability to write efficient and maintainable asynchronous JavaScript code.

While promises are widely adopted, it's essential to be aware of alternative approaches like async/await and Web Workers, as they may better suit specific use cases or preferences.

As you continue to explore and apply different asynchronous programming methods, you'll be better equipped to build responsive, user-friendly web applications.

But before we dive into that, we need to make sure you understand what Synchronous code is and how it works.

What is Synchronous Code?

When we write a program in JavaScript, it executes line by line. When a line is completely executed, then and then only does the code move forward to execute the next line.

Let's look at an example of this:

let greet_one = "Hello"
let greet_two = "World!!!"
console.log(greet_one)
for(let i=0;i<1000000000;i++){
}
console.log(greet_two);

Now if you run the above example on your machine you will notice that greet_one logs first. Then the program waits for a couple of seconds and then logs greet_two. This is because the code executes line by line. This is called synchronous code.

This creates lot of problems. For example, if a certain piece of code takes 10 seconds to execute, the code after it won't be able to execute until it's finished, causing delays.

What is Asynchronous Code?

With asynchronous code, multiple tasks can execute at the same time while tasks in the background finish. This is what we call non-blocking code. The execution of other code won't stop while an asynchronous task finishes its work.

Let's see an example of asynchronous code:

let greet_one = "Hello"
let greet_two = "World!!!"
console.log(greet_one)
setTimeout(function(){
    console.log("Asynchronous");
}, 10000)
console.log(greet_two);

In the above example, if you run the code on your machine you will see greet_one and greet_two logged even there is code in between those 2 logs.

Now, setTimeout is asynchronous so it runs in background, allowing code after it to execute while it runs. After 10 seconds, Asynchronous will print because we set a time of 10 seconds in setTimeout to execute it after 10 seconds.

In this tutorial, we will study asynchronous JavaScript in detail so you can learn how to write your own asynchronous code. I just wanted to give you a taste of async JavaScript using in-built functions to whet your appetite.

How Callbacks Work in JavaScript

"A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action." (MDN)

Let's look at a code example to see why using callbacks instead would be helpful:

function compute(action, x, y){
    if(action === "add"){
        return x+y
    }else if(action === "divide"){
        return x/y
    }
}

console.log(compute("add",10,5))   
console.log(compute("divide",10,5))

In the above example, we have two operations. But what if we want to add more operations? Then the number of if/else statements would increase. This code would be lengthy, so we use callbacks instead:

function add(x,y){
    return x+y
}

function divide(x,y){
    return x/y
}

function compute(callBack, x, y){
    return callBack(x,y)
}

console.log(compute(add, 10, 5))    // 2
console.log(compute(divide, 10, 5))

Now when we call compute with three arguments, one of them is an operation. When we enter in the compute function, the function returns a function with a given action name. It, in response, calls that function and returns the result.

Welcome to Callback Hell

Callbacks are great, but you don't want to use them excessively. If you do, you'll get something called "callback hell". This happens when you nest callbacks within callbacks many levels deep.

The shape of callback hell is like a pyramid and is also called the “pyramid of doom”. It makes the code very difficult to maintain and understand. Here's an example of callback hell:

setTimeout(() =>{
    console.log("One Second");
    setTimeout(() =>{
        console.log("Two Seconds");
        setTimeout(() =>{
            console.log("Three Seconds");
            setTimeout(() =>{
                console.log("Four Seconds");
                setTimeout(() =>{
                    console.log("Five Seconds");
                }, 1000)
            }, 1000)
        }, 1000)
    }, 1000)
}, 1000)

When one second has passed, the code logs "one seconds". Then there's another call which runs after one more second and logs "two seconds" and it goes on and on.

We can escape this callback hell using something call Promises in asynchronous JavaScript.

How Promises Work in JavaScript

A promise is placeholder for the future result of an asynchronous operation. In simple words, we can say it is a container for a future value.

When using promises, we don't need to relay on callbacks which helps us avoid callback hell.

Before showing you how promises work through code, I'll explain promises using the analogy of a lottery ticket.

Promises are like lottery ticket. When we buy a lottery ticket, it says we will get money if our outcome is right. This is like a promise. The lottery draw happens asynchronously, and if the numbers match, we receive the money which was promised.

Now let's look at a code example:

const request = fetch('https://course-api.com/react-store-products')
console.log(request);

The above code is using fetch for a request from an API. It returns a promise which will get a response from the server.

This is how a promise looks. It has a particular promise state and result. When a promise is created it runs asynchronously. When the given task is completed, then we say the promise is settled. After the promise is settled, we can have either a fulfilled or rejected promise state based on the outcome of the promise. We can handle these different states in different ways in our code.

How to Consume Promises

We can consume a promise using the then() method on the promise. Producing code is code that can take some time to complete. Consuming code is code that must wait for the result.

So if we consume a promise, this means that when we make a request, we wait for the result. Then after result arrives, we perform some operation on those results.

Let's continue using the above example to understand how we can consume a promise.

const request = fetch('https://course-api.com/react-store-products').then((response) =>{
    console.log(response);
    return response.json()
}).then((data) =>{
    console.log(data);
})

We make a request to the country API. Then, after the fetch request, we use the then() method to consume the promise. After that, we return a bunch of information like header, status, and so on (you can see it in the below output image).

So we specifically need data which we need to convert to JSON which returns a promise. The data which is returned when we make a API request gets returned in the form of a promise.

To handle that promise, we again use the then() method to log data from the response. Using multiple then() methods on a single request is called chaining promises.

How to Handle Rejected Promises

Consuming promises is good and all, but it's also very important to learn how to handle rejected promises. In real world situations, there could be times when our app crashes due to not handling rejected promises properly.

So let's take an example: we will put our promises in a function called call(). In HTML, we will create a button and add an event listener to it. When we click on the button it will call the call() function.

Here's what that looks like:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promises</title>
</head>
<body>

    <button class="btn">Request</button>
    <script src="./script.js"></script>
</body>
</html>

script.js:

function call(){

    const request = fetch('https://course-api.com/react-store-products').then((response) =>{
        console.log(response);
        return response.json()
    }).then((data) =>{
        console.log(data);
    })

}

const btn = document.querySelector("button")
btn.addEventListener("click", function(){
    call();
})

Why are we doing this? We are setting the promise up to get rejected. Once we run this code, go to inspect and select the network tab. Set No throttling to offline and click on the button to send the request. You will get a rejected promise.

Once we click on the button, we will get error which is caused by no internet connection.

This situation can happen in the real world if a user's internet connection is slow. We are making an API request for which we need internet with decent speed. Sometimes the client might have an issue with their internet. This can lead to rejected promises which will throw an error which we haven't seen how to handle yet.

Now we will learn to handle this error. We used then() to consume our promises. Similar to that, we will chain the catch() method to that promise. Take a look at the following code:

function call(){

    const request = fetch('https://course-api.com/react-store-products').then((response) =>{
        console.log(response);
        return response.json()
    }).then((data) =>{
        console.log(data);
    }).catch((err) =>{
        alert(err);
    })

}

const btn = document.querySelector("button")
btn.addEventListener("click", function(){
    call();
})

Now the catch() method will get an error from the rejected promise and will display the message in an alert.

We get the error because we got a rejected promise which indicates that there is some issue. We can do whatever we want in the catch() block when we encounter an error.

Along with the catch() method, there is one more helpful method called finally(). We can chain it to promises which will run no matter whether the promise is accepted or rejected.

function call(){

    const request = fetch('https://course-api.com/react-store-products').then((response) =>{
        console.log(response);
        return response.json()
    }).then((data) =>{
        console.log(data);
    }).catch((err) =>{
        console.log(err);
    }).finally(() =>{
        console.log("Will always run");
    })

}

const btn = document.querySelector("button")
btn.addEventListener("click", function(){
    call();
})

We can use this finally() method for clearing things after the API call. There are many ways to use the finally() method.

How to Create a Promise

We know how to consume promises, but what about creating your own promises? You can do that using new Promise().

You might wonder - why do we need our own promises? Firstly, promises are asynchronous in nature. We can create any task to be asynchronous by creating our own promises. Wecan handle them using the then() and catch() methods that we learned in the above section.

Once you know how to create promises, you can make any piece of code asynchronous. Then it will not block code execution if the other code running is taking a long time to complete.

Let's see how this works using an example:

let lottery = new Promise(function(resolve, reject){
    console.log("Lottery is happening");

    setTimeout(() => {
        if(Math.random() >= 0.5){
            resolve("You Won!!!")
        }
        else{
            reject(new Error("Better luck next time"))
        }
    }, 5000);

})

First we created a promise using new Promise(). It will have a function with two arguments, resolve and reject.

We will call resolve when our task is successful, and reject when the task is unsuccessful. We will use the lottery terminology that I used to explain the concept of promises in the above section.

Let's say if Math.random() gives a value below or equal to 0.5, we will win the lottery. Otherwise we will lose the lottery. If the condition is not true, the code throws a new error for better understanding of the error in the console. So we can throw our own custom errors to the user for better understanding.

In the example above, if Math.random() is less than 0.5, that means the user lost the lottery. So we throw our custom error Better luck next time so that the user understands that they lost the lottery.

Now we will try to consume the promise that we created.

let lottery = new Promise(function(resolve, reject){
    console.log("Lottery is happening");

    setTimeout(() => {    
        if(Math.random() >= 0.5){
            resolve("You Won!!!")
        }
        else{
            reject(new Error("Better luck next time"))
        }   
    }, 5000);

})

lottery.then((response) =>{
    console.log(response);
}).catch((err) =>{
    console.log(err);
})

We consume the promise using the then() method. It will print the response that we provided in resolve(). If the promise is rejected we will catch the error in the catch() method. The error will come from the reject() argument that we mentioned in our own promise.

How to Consume Promises using Async/await

Consuming promises using the then() method can become messy sometimes. So we have an alternative method to consume promises called async/await.

Just keep in mind that async/await will be using the then() method behind the scenes to consume promises.

Why use async/await if we have the then() method? We use async/await because it's easy to use. If we start chaining methods to promises using the then() method the chain will be very long and gets complex with the addition of multiple then() methods. So async/await is simpler.

Here's how async/await works:

const fetchAPI = async function(){
    const res = await fetch('https://cat-fact.herokuapp.com/facts')
    const data = await res.json()
    console.log(data);
}
fetchAPI()
console.log("FIRST");

In the above code, we first call the fetchAPI() to see the async behavior of the function. Then it logs "FIRST". So according to asynchronous JavaScript, fetchAPI() should be running in the background and not block the execution of the code. As a result, "FIRST" logs and then the result of fetchAPI is displayed.

Now, if you want to handle asynchronous tasks in your functions, you have to make that function asynchronous using the async keyword before the function. Wherever promises are returned we have to use await before it to consume promises.

Now you might be thinking, how should we handle errors? For that we can use try...catch() to handle errors in async/await.

Error Handling with try...catch()

We can use try...catch() in vanilla JavaScript as well. But it can also help us handle errors in asynchronous JavaScript with async/await.

try...catch() is similar to the catch() method in then() using the catch() chaining method. Here we will try the code in the try block. If that runs successfully then there is no problem.

But if the code in the try block has an error, we can catch it in the catch block. We can check for errors in the try block and throw our custom error which will be caught in catch block. Once we catch the error in the catch block we can do whatever we want when we encounter an error.

Let's see how it works with the code example we've been using.

const fetchAPI = async function(){
    try{
        const res = await fetch('https://cat-fact.herokuapp.com/fact')
        if(!res.ok){
            throw new Error("Custom Error")
        }
        const data = await res.json()
        console.log(data);
    } catch(err){
        console.log(err);
    }
}


fetchAPI()
console.log("FIRST");

First, we wrap the asynchronous code in a try block. Then in the catch block we log the error. In the try block, if res.ok is false we throw our custom error using throw new Error which catch will get. Then we log it to the console.

How to Return Values from Async Functions

So far, we've learned about asynchronous code, the then() and catch() methods, and handling asynchronous code with async/await. But what if we want to return a value from an async function using async/await?

When you're working with asynchronous code, it's often necessary to return a value from an async function so that other parts of your program can use the result of the asynchronous operation.

For example, if you're making an HTTP request to fetch data from an API, you'll want to return the response data to the calling function so that it can be processed or displayed to the user.

Well, we can do that. Take a look at the below example:

const fetchAPI = async function(){
    try{
        const res = await fetch('https://cat-fact.herokuapp.com/facts')
        if(!res.ok){
            throw new Error("Custom Error")
        }
        const data = await res.json()
        console.log(data);
        return "Done with fetchAPI"
    } catch(err){
        console.log(err);
        throw new Error("Custom Error")
    }
}


console.log(fetchAPI())

If we log the fetchAPI we will get back a promise which is fullfilled. You know very well how to handle these promises. We will be doing it using the then() method.

const fetchAPI = async function(){
    try{
        const res = await fetch('https://cat-fact.herokuapp.com/facts')
        if(!res.ok){
            throw new Error("Custom Error")
        }
        const data = await res.json()
        console.log(data);
        return "Done with fetchAPI"
    } catch(err){
        console.log(err);
        throw new Error("Custom Error")
    }
}


fetchAPI().then((msg) =>{
    console.log(msg);
}).catch((err) =>{
    console.log(err);
})

Now when we run our program, we will see our returned msg from the try block using async/await logged in the console.

But what if there was an error in async/await? The fetchAPI with the then() method will still log it and it would be undefined.

To avoid this in the catch block again we throw a new error and use the catch() method to catch that error after the then() method.

Try changing the then() and catch() methods with async/await. This would be a good exercise for you to understand what you've learned in this article.

In JavaScript, there are two common ways to work with asynchronous operations: then/catch method chaining and async/await. Both methods can be used to handle promises, which are objects that represent the eventual completion (or failure) of an asynchronous operation.

then/catch method chaining is a more traditional way to handle asynchronous operations, while async/await is a newer syntax that provides a more concise and easier-to-read alternative.

How to Run Promises in Parallel

Let's say we want to make three requests for three different country capitals. We can do three different fetch calls, each of which will wait for the one above to complete.

const fetchAPI = async function(country1,country2,country3){
    try{
        const res1 = await fetch(`https://restcountries.com/v3.1/name/${country1}`)
        const res2 = await fetch(`https://restcountries.com/v3.1/name/${country2}`)
        const res3 = await fetch(`https://restcountries.com/v3.1/name/${country3}`)


        const data1 = await res1.json()
        const data2 = await res2.json()
        const data3 = await res3.json()
        console.log(data1[0].capital[0]);
        console.log(data2[0].capital[0]);
        console.log(data3[0].capital[0]);
        return "Done with fetchAPI"
    } catch(err){
        console.log(err);
        throw new Error("Custom Error")
    }
}


fetchAPI("canada", "germany", "russia")

In the above code, we are making three fetch calls, then converting them to json() and logging their capitals.

But if you hit inspect and see in the network tab, res2 is waiting for res1 to complete and res3 is waiting for res2 to complete.

This can negatively impact our application's performance. Because if a promise is waiting for another promise to complete it can negatively impact the performance of the website.

To overcome this performance issue, we can use something called **Promise.all** . It will call three fetch requests simultaneously, which in return will reduce our fetching time and improve our application's performance.

How to Use Promise.all()

With the help of Promise.all(), we can run multiple promises in parallel which will boost performance. The promise.all() takes an array as an argument which are promises and run them in parallel.

let promise1 = new Promise((resolve) =>{
    setTimeout(() =>{
       resolve("First Promise")
    }, 2000)
})

let promise2 = Promise.resolve("Second Promise")

let returnedPromises = Promise.all([promise1,promise2]).then((res) =>{
    console.log(res);
})

The result of using promise.all() is that both promises were running in parallel.

Wrapping Up

After reading this tutorial, I hope you have a better understanding of asynchronous JavaScript. Feel free to reach out to me for discussion and suggestions.

You can follow me on:

• Twitter

• LinkedIn

• Instagram

We'll start by giving a theoretical foundation about what asynchronism is, and how it relates to key components of JavaScript: The execution thread, the call stack and the event loop.

And then I'm going to present the three ways in which we can handle asynchronous tasks in JavaScript: Callbacks, promises and async/await.

Sounds fun, right? Let's go!

Table of Contents

• What is asynchronism

• Asynchronism in Javascript

  • What is the call stack?

  • Web APIs, the callback queue, and the event loop

    • What are Web APIs?

    • What are the callback queue and the event loop?

• So how do we code this stuff... ?

  • How callback functions work

  • How promises work

  • How async-await works

• Wrap-up

What is Asynchronism?

Any computer program is nothing but a series of tasks we require the computer to execute. In JavaScript, tasks can be classified into synchronous and asynchronous types.

Synchronous tasks are the ones that execute sequentially, one after the other, and while they're being executed nothing else is being done. At each line of the program, the browser waits for the task to finish before jumping to the next one.

We say this kind of tasks are "blocking", because while they execute they block the execution thread (I'm going to explain what this is in a sec), preventing it from doing anything else.

Asynchronous tasks, on the other hand, are the ones that, while they execute, they don't block the execution thread. So the program can still perform other tasks while the asynchronous task is being executed.

This is why we say this kind of tasks are "non blocking". This technique comes in handy specially for tasks that take long time to execute, as by not blocking the execution thread the program is able to execute more efficiently.

According to Mozilla docs:

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result.

Asynchronism in JavaScript

Now that we have a more or less clear idea of what asynchronism is, let's get into the complicated interesting stuff – how JavaScript makes this possible.

One of the first apparent paradoxes of JavaScript – and there are a few – that you'll encounter when learning about the language is that JavaScript is a single threaded language.

"Single threaded" means it has a single thread of execution. This means that JavaScript programs can only execute a single task at a time.

This isn't the case, for example, for languages like Java or Ruby, which can create various execution threads and in that way execute many tasks simultaneously.

Visualizing single thread vs multi thread execution

And here the paradox is: if JavaScript can only execute only one task at a time, how come synchronous tasks can execute while asynchronous tasks complete "in the background"? How come asynchronous tasks don't block the execution thread? How are they executed then?

To explain this, we need to briefly describe how web browsers execute JavaScript code and some of its core components: The call stack, web APIs, the callback queue, and the event loop.

What is the Call Stack?

As you may now, a stack is a type of data structure where elements are added and removed following a LIFO (last in, first out) pattern. Browsers use something called the call stack to read and execute each task contained in a Javascript program.

Side comment: If you're not familiar with data structures, you can take a look at this article I wrote a while ago.

The way it works is quite simple. When a task is to be executed, it's added to the call stack. When it's finished, it's removed from the call stack. This same action is repeated for each and every task until the program is fully executed.

Let's see this with an easy example. If we had these three lines of code:

console.log('task 1')
console.log('task 2')
console.log('task 3')

Our call stack would look like this:

Illustration of an example call stack

1. Call stack starts off empty at the start of the program.

2. The first task is added to the call stack and executed.

3. The first task is removed from the call stack once finished.

4. The second task is added to the call stack and executed.

5. The second tasks is removed from the call stack once finished.

6. The third task is added to the call stack and executed.

7. The third task is removed from the call stack once finished. End of the program.

Easy right? Now let's see a slightly more complicated example with these lines of code:

const multiply = (a, b) => a*b

const square = n => multiply(n, n)

const printSquare = n => console.log(square(n))

printSquare(4)

Here we're calling printSquare(), which itself calls square(), which itself calls multiply(). With this program, our call stack might look like this:

Another more complex example of a call stack

1. Call stack starts off empty at the start of the program.

2. printSquare(4) is added to the call stack and executed.

3. As printSquare(4) calls the function square(4), square(4) is added to the call stack and executed as well. Note that as the execution of printSquare(4) isn't finished yet, it's kept on the stack.

4. As square(4) calls multiply(4,4), multiply(4,4) is added to the call stack and executed as well.

5. multiply(4,4) is removed from the call stack once finished.

6. square(4) is removed from the call stack once finished.

7. printSquare(4) is removed from the call stack once finished. End of the program.

In this example we can clearly see the LIFO pattern the call stack uses to add and remove tasks to it.

The important thing to notice here is that tasks are not removed from the stack until they're finished. This is how synchronous callbacks work.

When a function calls another function, the callback is added to the stack and executed. Once the execution of the callback is completed, it's removed from the stack and the execution of the main function is completed.

Web APIs, the Callback Queue, and the Event Loop

So far so good, right? Using the call stack, JavaScript takes account of each task, executes it, and then moves on to the next. Fairly simple.

Now let's check the following example:

console.log('task1')

setTimeout(() => console.log('task2'), 0)

console.log('task3')

Here, we're logging three separate strings, and on the second one we're using setTimeout to log it after 0 milliseconds. Which should be, according to common logic, instantly. So one should expect the console to log: "task1", then "task2", and then "task3".

But that's not what happens:

And if we had a look at our call stack during the program, It would look like this:

1. Call stack starts off empty at the start of the program.

2. console.log('task1') is added to the call stack and executed.

3. console.log('task1') is removed from the call stack once finished.

4. setTimeout(console.log('task2')) is added to the call stack, but it's not executed.

5. setTimeout(console.log('task2')) "mysteriously" disappears from the call stack.

6. console.log('task3') is added to the call stack and executed.

7. console.log('task4') is removed from the call stack once finished.

8. console.log('task2') "mysteriously" hops into the call stack and is executed.

9. console.log('task2') is removed from the call stack once finished.

To explain this "mysterious" disappearance and reappearance of the setTimeout task, we need to introduce three more components that are part of the browser runtime: Web APIs, the callback queue, and the event loop.

What are Web APIs?

Web APIs are a set of features and functionalities that the browser uses to enable JavaScript to execute. These features include DOM manipulation, AJAX calls, and setTimeout among other things.

To simplify the understanding of this, think about it like a different "execution place" rather than the call stack. When the call stack detects that the task it's processing is web API-related, it asks the web API "Hey API, I need to get this done", and the web API takes care of it, allowing the call stack to continue with the next task in the stack.

What are the callback queue and the event loop?

In the code example we saw before, we saw that setTimeout(console.log('task2')) "mysteriously" disappeared from the call stack. We now know that, it didn't actually disappear – it was sent to the web API.

But then it "mysteriously" reappeared again, so how does that work? Well, that's the job of the callback queue and the event loop.

The callback queue is a queue that stores the tasks that the web APIs return. Once the web API finishes executing the given task (which in this case was processing the setTimeout) it sends the callback to the callback queue.

Queues are a type of data structure where elements are added and removed following a FIFO pattern (first in, first out). Again, if you're not familiar with data structures, you can take a look at this article.

The event loop is a loop (woah... really?) that constantly checks two things:

1. If the call stack is empty

2. If there's any task present in the callback queue

If both of these conditions are met, then the task present in the callback queue is sent to the call stack to complete its execution.

Now that we know about web APIs, the callback queue, and the event loop, we can know what actually happened in our previous example:

Following the red lines, we can see that when the call stack identified that the task involved setTimeout, it sent it to the web APIs to process it.

Once the web APIs processed the task, it inserted the callback into the callback queue.

And once the event loop detected that the call stack was empty and that there was a callback present in the callback queue, it inserted the callback in the call stack to complete its execution.

This is how JavaScript makes asynchronism possible. Asynchronous tasks are processed by web APIs instead of the call stack, which handles only synchronous tasks.

In this way, the call stack can just derive asynchronous tasks to web APIs and carry on executing whatever else is present on the stack. And thanks to the callback queue and the event loop, once the asynchronous task was handled by the web APIs, the callback is reinserted into the call stack.

It's important to remember that JavaScript always runs only one task at a time. The "magic" of asynchronism is made possible by the existence of the web APIs, the callback queue, and the event loop, which are responsible for managing asynchronous tasks.

Side comment: If you wonder how all this works on Node instead of a browser, it's fairly similar. Instead of web APIs you have C++ APIs. The call stack, the callback queue, and the event loop work exactly the same.

If you want a more detailed explanation of all these topics, I recommend that you take a look at this very well known talk by Philip Roberts.

So How Do We Code This Stuff... ?

Now that we have the theoretical foundation of how JavaScript makes asynchronism possible, let's see how all this implements in code.

There are mainly three ways in which we can code asynchronism in JavaScript: callback functions, promises, and async-await.

I'll present them in the chronological order JavaScript has provided these features (first there were only callback functions, then came promises, and lastly async-await). But keep in mind that the most common and recommended practice nowadays is to use async-await. ;)

How Callback Functions Work

Callbacks are functions that are passed as arguments to other functions. The function that takes the argument is called a "Higher order function", and the function that is passed as an argument is called a "Callback".

We can see this in practice in the following example:

const callbackFunc = () => console.log('Im the callback')

const higherOrderFunction = callback => callback()

higherOrderFunction(callbackFunc)

Side comment: the possibility of passing functions as parameters to other functions is one of the features that make functions first class citizens in JavaScript.

The difference between synchronous and asynchronous callbacks relies on the type of task that function executes. There's no syntactic difference between each kind. Let's see this in code.

const arr = [1,2,3]

console.log('logging...')
arr.map(e => console.log('sync item', e)) // This is a synchronous callback

arr.map(e => setTimeout(() => console.log('async item', e), 0)) // This is an asynchronous callback
console.log('the stuff')

Here we have an array of three elements, a couple of console.logs, and two map functions. What map does is iterate over each element of the array and perform a function for each element in the array. That function is defined as a callback.

In the first map, we are logging the item with console.log. In the second one, we're doing the same but using setTimeout (which as we saw before is an asynchronous task performed by web APIs).

As a result, our console will look like this:

First, all the synchronous callbacks are executed, and then the asynchronous callbacks kick in.

As we can see, the fact that the functions execute asynchronously isn't related to the fact that they're callbacks or not, but rather to the kind of task that function executes. As setTimeout is an async task, those callbacks are executed asynchronously.

How Promises Work

A more modern approach for dealing with asynchronism is by using promises. A promise is a special kind of object in JavaScript that has 3 possible states:

• Pending: It's the initial state, and it signifies that the corresponding task is yet to be resolved.

• Fulfilled: Means the task has been completed successfully.

• Rejected: Means the task has produced some kind of error.

To see this in practice, we'll use a realistic case in which we fetch some data from an API endpoint and log that data in our console. We'll use the fetch API provided by browsers and a public API that returns Chuck Norris jokes.

Here our function executes a GET HTTP request to the endpoint, and we use the then and catch methods that the promise object has to process the promise response.

const fetchJokeWithPromises = () => {
    console.log('fetching with promises...')

    fetch('https://api.chucknorris.io/jokes/random')
        .then(res => res.json())
        .then(res => console.log('res', res))
        .catch(error => console.error('There was an error!', error))
}

fetchJokeWithPromises()

But let's take a closer look at this step by step.

• If we log just the fetch line, like this:

console.log('fetch', fetch('https://api.chucknorris.io/jokes/random'))

We see we get a promise with a pending state:

• Then if we execute the first then method and log its result, we get the following:

fetch('https://api.chucknorris.io/jokes/random')
    .then(res => console.log('res', res))

We see here we no longer have a promise, but the actual response from the endpoint. The then method waits for the promise to complete, and then provides us with the result, which is present as a parameter for the method.

• But to read the actual response body (which in our console we can see its a ReadableStream), we have to call the .json() method on it. This itself returns another promise. That's why we need another .then().

fetch('https://api.chucknorris.io/jokes/random')
        .then(res => res.json())
        .then(responseBody => console.log('responseBody', responseBody))

And here, finally we can see the full response and our joke in the value property. ;)

• What the catch method does is execute whenever a promise is rejected. Normally catch is used to handle an error, like showing a certain message to the user when an API fails to respond.

To see it in action, let's use a random endpoint like this one:

fetch('https://asdadsasdasd/')
    .then(res => res.json())
    .then(resp => console.log('resp', resp))
    .catch(error => console.error('There was an error!', error))

And in our console we can see the catch method executed:

An important thing to notice is in situations like this one, where we have various .then methods chained, we only need to use one .catch method. This is because that one .catch will process the errors in all of the promises chained.

Again, to see this in action now, let's go back to our previous endpoint and mess with the .json() call, misspelling it now.

fetch('https://api.chucknorris.io/jokes/random')
    .then(res => res.jon())
    .then(resp => console.log('resp', resp))
    .catch(error => console.error('There was an error!', error))

To round up promises, there's an additional method provided by promises which is .finally. This will execute always once the promise has been resolved, either successfully or not.

fetch('https://api.chucknorris.io/jokes/random')
    .then(res => res.json())
    .then(resp => console.log('resp', resp))
    .catch(error => console.error('There was an error!', error))
    .finally(() => console.log('Promised resolved!'))

How Async-Await Works

Async-await is the latest way of dealing with asynchronism provided by JavaScript. Basically, it's just syntactic sugar that allow us to deal with promises in a more concise way than using .then methods.

Let's see this in action following the same previous example.

const fetchJokeWithAsyncAwait = async () => {
    try {
        const res = await fetch('https://api.chucknorris.io/jokes/random')
        const data = await res.json()
        console.log('async-await data', data)

    } catch (error) {
        console.error('There was an error!', error)
    }
}

fetchJokeWithAsyncAwait()

Here we have a function that executes the fetch and logs the response. See that we start by using the async keyword when we declare the function. This is a requirement for all functions that use async-await.

Then we enclose our fetch call in a try-catch statement. This is required because with async-await we won't use the .catch method. But we still need to process possible errors.

We achieve this with the use of try-catch. If anything contained in the try statement returns an error, then the catch statement executes, obtaining the error as a parameter.

As you can see, we are assigning the result of the fetch call to a variable called res. And before the fetch we're using the await keyword.

const res = await fetch('https://api.chucknorris.io/jokes/random')

This means that Javascript will wait for the promise to resolve before assigning its value to the variable. And any operations done on that variable, will only execute once its value has been assigned.

In the next line we're calling the .json() method on the res variable, and again using the await keyword before it so the promise result is then assigned to the data variable.

And lastly, we log our data.

As mentioned, async-await is just syntactic sugar. It doesn't do anything differently than .then and .catch methods. It's just easier to write and read.

Wrap-up

Well everyone, as always, I hope you enjoyed the article and learned something new.

If you want, you can also follow me on LinkedIn or Twitter. See you in the next one!

In traditional (synchronous) programming, each person would have to wait for the person before them to finish their task before starting their own.

But with asynchronous programming, everyone can start and work on their tasks simultaneously without waiting for the others to finish.

Similarly, in a computer program, asynchronous programming allows a program to work on multiple tasks simultaneously instead of completing one task before moving on to the next one. This can make the program get more things done in a shorter amount of time.

For example, a program can send a request to a server while handling user input and processing data, all at the same time. This way, the program can run more efficiently.

In this article, we will delve into the world of asynchronous programming in JavaScript, exploring the different techniques and concepts that are used to achieve this powerful programming paradigm.

From callbacks to promises and async/aawait, you will understand how to harness the power of asynchronous programming in your JavaScript projects.

Understanding asynchronous programming is essential for building high-performance web applications, whether you're a seasoned developer or just getting started with JavaScript. So, read on to learn more about this vital concept.

What is Synchronous Programming?

Synchronous programming is a way for computers to do things one step at a time, in the order they are given the instructions.

Imagine you're cooking dinner and have a list of tasks, like boiling water for pasta, frying chicken, and making a salad.

You would do these tasks one at a time and wait for each one to finish before moving to the next.

Synchronous programming works similarly, where the computer will complete one task before moving on to the next. This makes it easy to understand and predict what the computer will do at any given time.

Here's an example of synchronous code in JavaScript:

// Define three functions
function firstTask() {
  console.log("Task 1");
}

function secondTask() {
  console.log("Task 2");
}

function thirdTask() {
console.log("Task 3");  
}

// Execute the functions
firstTask();
secondTask();
thirdTask();

This code will output the following messages in the order they appear:

"Task 1"
"Task 2"
"Task 3"

The code will execute the tasks in the order you see them and wait for each task to be completed before moving on to the next one.

Diagram showing how synchronous programming works.

However, synchronous programming can be problematic in certain situations, particularly when dealing with tasks that take a significant amount of time to complete.

For example, let's say that a synchronous program performs a task that requires waiting for a response from a remote server. The program will be stuck waiting for the response and cannot do anything else until the response is returned. This is known as blocking, and it can lead to an application appearing unresponsive or "frozen" to the user.

Consider the following code:

function someLongRunningFunction() {
    let start = Date.now();
    while (Date.now() - start < 5000) {
        // do nothing
    }
    return "Hello";
}

console.log('Starting...');

let result = someLongRunningFunction();
console.log(result);

console.log('...Finishing');

In this example:

• The program starts by logging "Starting..." to the console.
• Then it calls the someLongRunningFunction, which simulates a long-running task that takes 5 seconds to complete. This function will block the execution of the rest of the program while it runs.
• Once the function completes, it will return "Hello", and the program will log it on the console.
• Finally, the program will log "Finishing" to the console.

During the 5 seconds that someLongRunningFunction() is being executed, the program will be blocked, become unresponsive, and be unable to execute the next line of code. This can cause the program to take a long time to complete and make the application unresponsive to the user.

However, if the program is executed asynchronously, it will continue to run the next line of code instructions rather than becoming blocked. This will enable the program to remain responsive and execute other code instructions while waiting for the timeout to complete.

What is Asynchronous Programming?

Asynchronous programming is a way for a computer program to handle multiple tasks simultaneously rather than executing them one after the other.

Diagram showing how asynchronous programming works.

Asynchronous programming allows a program to continue working on other tasks while waiting for external events, such as network requests, to occur. This approach can greatly improve the performance and responsiveness of a program.

For example, while a program retrieves data from a remote server, it can continue to execute other tasks such as responding to user inputs.

Here's an example of an asynchronous program using the setTimeout method:

console.log("Start of script");

setTimeout(function() {
  console.log("First timeout completed");
}, 2000);

console.log("End of script");

In this example, the setTimeout method executes a function after a specified time. The function passed to setTimeout will be executed asynchronously, which means that the program will continue to execute the next line of code without waiting for the timeout to complete.

When you run the code, the output will be:

Start of script
End of script
First timeout completed

As you can see, console.log("First timeout completed") will be executed after 2 seconds. Meanwhile, the script continues to execute the next code statement and doesn't cause any "blocking" or "freezing" behaviour.

In JavaScript, asynchronous programming can be achieved through a variety of techniques. One of the most common methods is the use of callbacks.

How to Use a Callback Function

Let's say you want to plan a birthday party for your child. You have to invite the guests, order a cake, and plan the games. But you also want to hire a clown to entertain the guests. You can only have the clown come to the party once all the other party arrangements are done, and the guests have arrived.

Illustration of a clown

So, you tell the clown to come to the party only after you have notified him that the guests have arrived. In this case, the clown represents a callback function, and the "guests arriving" represents the function that has to complete execution before the callback can be executed.

In code, a callback function is a function that is passed as an argument to another function, and it is executed after the first function has finished running. It's commonly used in JavaScript to handle asynchronous operations like fetching data from a server, waiting for a user's input, or handling events.

Here is a simple example of how you can use a callback function to handle an asynchronous operation:

// Declare function
function fetchData(callback) {
  setTimeout(() => {
    const data = {name: "John", age: 30};
    callback(data);
  }, 3000);
}

// Execute function with a callback
fetchData(function(data) {
  console.log(data);
});

console.log("Data is being fetched...");

In this example:

• We have a function called fetchData that uses the setTimeout method to simulate an asynchronous operation. The function takes a callback as an argument.
• The callback function is then passed the data retrieved by the function after the timeout has been completed.

The setTimeout method is used to execute the callback after a specified time (in this case, 3 seconds). The callback will be executed asynchronously, which means that the program will continue to execute the next line of code without waiting for the timeout to complete.

When you run the code, the output will be:

Data is being fetched...
{name: "John", age: 30}

As you can see, console.log("First timeout completed") will be executed after 3 seconds. Meanwhile, the script continues to execute the next statement, console.log("Data is being fetched...");.

This is the core concept of asynchronous programming. The script doesn't wait for the asynchronous operation to complete. It just continues to execute the next instruction.

What is Callback Hell?

Callbacks provide a useful way to handle asynchronous operations. However, when many callbacks are nested, the code can be complex and hard to read and understand.

This happens when you chain multiple callbacks together, one after the other, creating a pyramid-like structure of indentation called callback hell, also known as the "Pyramid of Doom".

Here is an example of callback hell:

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      getEvenEvenMoreData(c, function(d) {
        getFinalData(d, function(finalData) {
          console.log(finalData);
        });
      });
    });
  });
});

In this example:

1. The getData function takes a callback as an argument and is executed after data is retrieved.
2. The callback function then takes the data and calls the getMoreData function, which also takes a callback as an argument, and so on.

This nesting of callbacks can make the code difficult to maintain, and the indentation makes it even harder to see the overall structure of the code.

To avoid callback hell, you can use a more modern way of handling async operations known as promises. Promises provide a more elegant way of handling the asynchronous flow of a program compared to callback functions. This is the focus of the next section.

How Do Promises Work?

A promise represents a way of handling asynchronous operations in a more organized way. It serves the same purpose as a callback but offers many additional capabilities and a more readable syntax.

A promise in JavaScript is a placeholder for a future value or action. By creating a promise, you are essentially telling the JavaScript engine to "promise" to perform a specific action and notify you once it is completed or fails.

Illustration of a promise and the JS engine

Next, callback functions are then attached to the promise to handle the outcome of the action. These callbacks will be invoked when the promise is fulfilled (action completed successfully) or rejected (action failed).

As a JavaScript developer, you will likely spend more time consuming promises returned by asynchronous Web APIs and managing their outcomes rather than creating them yourself.

How to Create a Promise

To create a promise, you'll create a new instance of the Promise object by calling the Promise constructor.

The constructor takes a single argument: a function called executor. The "executor" function is called immediately when the promise is created, and it takes two arguments: a resolve function and a reject function.

Diagram of the anatomy of a promise.

Write the following line of code to declare a promise:

// Initialize a promise
const myPromise = new Promise(function(resolve, reject) => {})

Now, let's inspect the myPromise object by logging it to the console.

console.log(myPromise);

This image represents an output of inspecting the promise object.

As you can see, the promise has a pending status and an undefined value. This is because nothing has been set up for the promise object yet, so it's going to sit there in a pending state forever without any value or result.

Now, let's set up myPromise to resolve with a string printed to the console after 2 seconds.

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

Now, when you inspect myPromise object, you'll find that it has a status of "fulfilled", and a value set to the string you passed to the resolve function.

A promise has three states:

• Pending: initial state, neither fulfilled nor rejected.
• Fulfilled: meaning that an operation was completed successfully.
• Rejected: meaning that an operation failed.

Pending, fulfilled, and rejected states of a promise.

It's important to note that a promise is said to be settled when it is resolved or rejected.

Now that you know how promises are created, let's look at how you may consume them.

How to Consume a Promise

Consuming a promise involves the following steps:

1. Obtain a reference to the promise: To consume a promise, you first need to obtain a reference to it. Based on the code from the previous section, our reference to a promise will be the myPromise object.
2. Attach callbacks to the promise: Once you have a reference, you can attach callback functions by using the .then and .catch methods. The .then method is called when a promise is fulfilled and the .catch method is called when a promise is rejected.
3. Wait for the promise to be fulfilled or rejected: Once you've attached callbacks to the promise, you can wait for the promise to be fulfilled or rejected.

Here is an example of how you might consume a promise:

myPromise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

Once the promise is fulfilled, the .then callback method will be called with the resolved value. And if the promise is rejected, the .catch method will be called with an error message.

You can also add the .finally() method, which will be called after a promise is settled. This means that .finally() will be invoked regardless of the status of a promise (whether resolved or rejected).

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    //code here will be executed regardless of the status
    //of a promise (fulfilled or rejected)
  });

How to Chain Promises

Promise chaining is a pattern that allows for a clear and easy-to-understand approach to handling asynchronous operations.

The pattern involves connecting multiple promises in a sequence, where the output of one promise is passed as input to the next promise.

The linking of the promises is achieved using the then() method. This method uses a callback function as an argument and returns a new promise. The new promise is then resolved with the value returned by the callback function.

Here is an example of promise chaining:

fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => processData(data))
    .then(processedData => {
        // do something with the processed data
    })
    .catch(error => console.log(error))

From the above code:

• The first promise, which is the fetch API function, is fetching data from a server.
• The second promise is parsing the response as JSON.
• The third promise is processing the data.
• The fourth promise is performing action on the data.
• The .catch method at the end of the chain will handle any errors that occurred in any of the previous promises.

It's important to keep in mind that .then methods are executed asynchronously and in order, each one waiting for the previous one to be resolved, and that the returned value of each .then will be passed as an argument to the next one.

Error Handling

When a promise is rejected, it will trigger the .catch() method, which handles errors. The .catch() method takes a single argument, which is the error thrown.

Another way of handling errors in a promise is by using the "try-catch" block inside a .then method.

Here is an example:

fetch("https://api.github.com/users/octocat")
  .then((response) => response.json())
  .then((data) => {
    try {
      //processing received data
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  })
  .catch((error) => console.log(error));

From the above code:

• The fetch() function makes a request to the GitHub API to fetch user data.
• The "try-catch" block is used inside the second .then method to handle any error that may occur when processing the data received from the server.
• And the outer .catch method will only catch errors that occur during the fetch request.

Handling errors is very important because promises are used to handle asynchronous operations, and these operations may fail for various reasons.

If an error occurs during the execution of a promise and it is not handled, the program will continue to execute and may lead to unexpected behaviour or crashes.

By handling errors, we can ensure that the program can continue to function even when an error occurs and also provide meaningful feedback to the user about the problem.

How to Use the Promise.all Method

The Promise.all() method takes an array of promises as input and returns a single promise that is fulfilled when all input promises have been fulfilled. It can be useful when you wait for multiple promises to be resolved before taking action.

For example, if you want to fetch data from multiple URLs.

let promise1 = fetch('https://jsonplaceholder.typicode.com/posts/1');
let promise2 = fetch('https://jsonplaceholder.typicode.com/posts/2');
let promise3 = fetch('https://jsonplaceholder.typicode.com/posts/3');

Here, promise1, promise2, and promise3 are promises that are fetching data from three different URLs.

Now, you can use Promise.all([promise1, promise2, promise3]) to wait for all the promises to resolve before doing something with the data, as shown below.

Promise.all([promise1, promise2, promise3])
.then((values) => {
  console.log(values);
})

In the above example:

• Promise.all() takes an array of promises as input and returns a new promise.
• The then method is then called on the returned promise to log the resolved values of all the input promises in the order they were passed to Promise.all().

Note that in an instance where any input promises are rejected, the returned promise will also be rejected with the value of the first rejected promise.

How to Use the Fetch API with Promises

I have been using the Fetch API for some examples in this article, and I understand that it may be unfamiliar to some readers. So I created this section to explain the basics of the Fetch API for those who may need to become more familiar with it.

The Fetch API is a built-in JavaScript feature that allows you to make network requests, such as fetching data from a server. It is a modern alternative to the older XMLHttpRequest API and is designed to be easier and more powerful.

Here is an example of how to use the Fetch API to fetch data from a server:

fetch('https://some-api.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

In this example,

• The fetch() method is used to make a request to the server located at "https://some-api.com/data". The returned value is a promise that will be fulfilled with the server's response.
• The first .then() method is called to consume the promise and extract JSON data from the response.
• The next then() method is called to log the extracted data to the console.
• If any errors occur, they will be caught in the catch() method and logged to the console.

I hope the above explanation helps to clear up any confusion about the Fetch API and allows you to better understand the examples provided in this article.

Async Functions with async/await

Async/Await is a feature that allows you to write asynchronous code in a more synchronous, readable way.

• async is a keyword that is used to declare a function as asynchronous.
• await is a keyword that is used inside an async function to pause the execution of the function until a promise is resolved.

Here's an example of how you can use async/await:

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  console.log(data);
}

getData();

In this example,

• the getData function is declared as an asynchronous function using the async keyword.
• Inside the asynchronous function, we use the await keyword to wait for the fetch function to complete and retrieve some data from an API.
• Once the data is retrieved, we use await again to wait and parse the retrieved data as JSON.
• And then finally, we log the data to the console.

"Aync/Await" is a powerful tool for handling asynchronous operations. It allows for more readable and maintainable code by eliminating the need for callbacks and providing a more intuitive way to handle asynchronous operations.

Using the "async" keyword before a function definition and the "await" keyword before an asynchronous operation makes the code look more like synchronous code, making it easier to understand.

Overall, "Async/Await" is valuable to the JavaScript developer's toolbox and can significantly simplify handling asynchronous operations in your code.

Conclusion

In summary, asynchronous programming is an essential concept in JavaScript that allows your code to run in the background without blocking the execution of other code.

Developers can create more efficient and responsive applications by using features like callbacks, async/await, and promises.

Asynchronous programming can be tricky to understand at first. But with practice and a solid understanding of the concepts, it becomes a powerful tool for building high-performance web applications.

Thank you for reading this article!

If you enjoyed this article and want to learn more about programming, follow me on Instagram at @alege_dev, where I post regular updates and tips on various programming topics.

Over the last 18 years of programming, I've had to deal with asynchronous behavior in virtually every project.

Since the adoption of async-await in JavaScript, we've learned that async-await makes a lot of code more pleasant and easier to reason about.

Recently I noticed that when I work with a resource that needs to asynchronously connect and disconnect, I end up writing code like this:

// NOT MY FAVORITE PATTERN
router.get('/users/:id', async (req, res) => {
  const client = new Client();
  let user;
  try {
    await client.connect();
    user = await client.find('users').where('id', req.path.id);
  } catch(error) {
    res.status(500);
    user = { error };
  } finally {
    await client.close();
  }
  res.json(user);
});

It gets verbose because we have to use try/catch to handle errors.

Examples of such resources include databases, ElasticSearch, command lines, and ssh.

In those use cases, I've settled into a code pattern I'm calling the Result-Error Pattern.

Consider rewriting the code above like this:

// I LIKE THIS PATTERN BETTER
router.get('/users/:id', async (req, res) => {
  const { result: user, error } = await withDbClient(client => {
    return client.find('users').where('id', req.path.id);
  });
  if (error) {
    res.status(500);
  }
  res.json({ user, error });
});

Notice a few things:

1. The database client gets created for us and our callback can just utilize it.
2. Instead of capturing errors in a try-catch block, we rely on withDbClient to return errors.
3. The result is always called result because our callback may return any kind of data.
4. We don't have to close the resource.

So what does withDbClient do?

1. It handles creating the resource, connecting and closing.
2. It handles try, catch, and finally.
3. It ensures that there will be no uncaught exceptions thrown from withDbClient.
4. It ensures that any exceptions thrown in the handler also get caught inside withDbClient.
5. It ensures that { result, error } will always be returned.

Here is an example implementation:

// EXAMPLE IMPLEMENTATION
async function withDbClient(handler) {
  const client = new DbClient();
  let result = null;
  let error = null;
  try {
    await client.connect();
    result = await handler(client);
  } catch (e) {
    error = e;
  } finally {
    await client.close();
  }
  return { result, error };
}

A step further

Photo by Tom Fisk from Pexels

What about a resource that does not need to be closed? Well the Result-Error Pattern can still be nice!

Consider the following use of fetch:

// THIS IS NICE AND SHORT
const { data, error, response } = await fetchJson('/users/123');

Its implementation might be the following:

// EXAMPLE IMPLEMENTATION
async function fetchJson(...args) {
  let data = null;
  let error = null;
  let response = null;
  try {
    const response = await fetch(...args);
    if (response.ok) {
      try {
        data = await response.json();
      } catch (e) {
        // not json
      }
    } else {
      // note that statusText is always "" in HTTP2
      error = `${response.status} ${response.statusText}`;
    }
  } catch(e) {
    error = e;  
  }
  return { data, error, response };
}

Higher-level use

Photo by 16018388 from Pixabay

We don't have to stop at low-level use. What about other functions that may end with a result or error?

Recently, I wrote an app with a lot of ElasticSearch interactions. I decided to also use the Result-Error pattern on higher-level functions.

For instance, searching for posts produces an array of ElasticSearch documents and returns result and error like this:

const { result, error, details } = await findPosts(query);

If you've worked with ElasticSearch, you'll know that responses are verbose and data is nested several layers inside the response. Here, result is an object containing:

1. records – An Array of documents
2. total – The total number of documents if a limit was not applied
3. aggregations – ElasticSearch faceted-search information

As you might guess, error may be an error message and details is the full ElasticSearch response in case you need things like error metadata, highlights, or query time.

My implementation for searching ElasticSearch with a query object reads something like this:

// Fetch from the given index name with the given query
async function query(index, query) {
  // Our Result-Error Pattern at the low level  
  const { result, error } = await withEsClient(client => {
    return client.search({
      index,
      body: query.getQuery(),
    });
  });
  // Returning a similar object also with result-error
  return {
    result: formatRecords(result),
    error,
    details: result || error?.meta,
  };
}

// Extract records from responses 
function formatRecords(result) {
  // Notice how deep ElasticSearch buries results?
  if (result?.body?.hits?.hits) {
    const records = [];
    for (const hit of result.body.hits.hits) {
      records.push(hit._source);
    }
    return {
      records,
      total: result.body.hits.total?.value || 0,
      aggregations: result.aggregations,
    };
  } else {
    return { records: [], total: null, aggregations: null };
  }
}

And then the findPosts function becomes something simple like this:

function findPosts(query) {
  return query('posts', query);
}

Summary

Here are the key aspects of a function that implements the Result-Error Pattern:

1. Never throw exceptions.
2. Always return an object with the results and the error, where one may be null.
3. Hide away any asynchronous resource creation or cleanup.

And here are the corresponding benefits of calling functions that implement the Result-Error Pattern:

1. You don't need to use try-catch blocks.
2. Handling error cases is as simple as if (error).
3. You don't need to worry about setup or cleanup operations.

Don't take my word for it, try it yourself!

Asynchronous here refers to all those functions in JavaScript that are processed in the background without blocking any other request.

In this article, you will learn and understand how NodeJS works and handles all functions or requests sent to a server either synchronously or asynchronously.

What is an Event Loop?

You might have guessed it right – Node handles requests using an Event loop inside the NodeJS environment. But first, let's understand some basic terms which will help us understand the whole mechanism.

An event loop is an event-listener which functions inside the NodeJS environment and is always ready to listen, process, and output for an event.

An event can be anything from a mouse click to a keypress or a timeout.

What are Synchronous and Asynchronous programming?

Synchronous programming means that the code runs in the sequence it is defined. In a synchronous program, when a function is called and has returned some value, only then will the next line be executed.

Let's understand with this an example:

const listItems = function(items) {
  items.forEach(function(item) {
    console.log(item)
  })
}

const items = ["Buy milk", "Buy coffee"]

listItems(items)

The output will look like this:

"Buy milk"
"Buy coffee"

In this example, when the listItems(items) function is called, it will loop through the array of items. The console.log(item) function gets called first for the first item of the array and it prints "Buy milk". Then again console.log(item) gets executed and this time it passes the second item of the array and prints "Buy coffee".

So you can say that the function was executed in the sequence it was defined.

Asynchronous programming, on the other hand, refers code that doesn't execute in sequence. These functions are performed not according to the sequence they are defined inside a program but only when certain conditions are met.

For example, setTimeOut() performs a task after a delay of a certain predefined number of miliseconds.

setTimeOut(function(){
    return( console.log("Hello World!") )
}, 3000)

These functions do not run line by line but only when they are required to run, irrespective of the function's declaration. In this case, the function runs automatically after 3 seconds when all synchronous functions have been executed.

Note: Asynchronous functions will run and execute only after all the synchronous functions have been executed. Until then, they will be processed in the background.

If you want to learn more about NodeJS and asynchronous programming, you can refer to this article

But, how does NodeJS handle asynchronous functions in the background and run all synchronous functions first? All these mechanisms can be easily explained with the NodeJS event loop.

How Does an Event Loop Work?

Now let's see how NodeJS event loops can execute a simple synchronous program using a Nodejs event loop diagram. Then we'll examine how Node executes the program line by line.

As we go through this section you'll start to understand what you are seeing here:

In the top-left corner, you have a Node file that is going to get executed. At the bottom left, you have an output terminal for the program. Then you have Call stack, Node APIs and Callback queue. All these together constitute the NodeJS environment.

For synchronous programming, you only need to focus on the call stack. This is the only part of the NodeJS environment that will be working in this case.

A callback stack is a data structure that you use to keep track of the execution of all functions that will run inside the program. This data structure has only one open end to add or remove top items.

When the program starts executing, it first gets wrapped inside an anonymous main() function. This is automatically defined by NodeJS. So main() gets pushed first to the callback stack.

Next, the variables a and b are created and their sum is stored in a variable sum. All these values are stored in memory.

Now, the console.log() is a function that is called and pushed inside the callback stack. It gets executed and you can see the output on the terminal screen.

After this function gets executed, it is removed from the callback stack. Then the main() is also removed as nothing is left to be called from the program. This is how a synchronous program gets executed.

Now, let's see how asynchronous functions or programs get executed inside NodeJS. We need the callback stack, Node APIs and callback queue all together to process an asynchronous function.

Let's start by looking at this example:

As usual, when the program starts executing, first the main() function gets added to the callback stack. Then console.log("Start") is called and added to the callback stack. After processing, the output is visible on the terminal and then it gets removed from the callback stack.

Now the next is the setTimeOut(...Zero...) function which gets added to the callback stack.

As this is an asynchronous function, it will not get processed in the callback stack. It is then added from the callback stack to the Node APIs where an event is registered and a callback function is set to get processed in the background.

Next is the setTimeOut(...Two..) which also gets added to the Node API from the callback stack as it is an asynchronous function. Then another callback function gets set to be processed after a 2 second timeout in the background. Up until this point other functions can be performed.

This is called non-blocking behaviour where all the synchronous functions are processed and executed first and asynchronous functions are processed in the background while waiting their turn to get executed.

Next, the console.log("End") function is called at last in the callback stack and gets processed here. You can see the output on the terminal. Now, all the synchronous functions are processed, and main() is removed from the callback stack.

In the background, all the asynchronous functions get processed and their callbacks are stored in the callback queue. The one which is processed first will be added first in the queue for execution in the callback stack.

Note: Asynchronous functions cannot run inside a callback stack until it gets emptied. That means that after main() is removed from call stack, only then can all asynchronous functions start executing.

Now, one by one they are pushed to the callback stack using the event loop and finally get executed. Each of the callback functions will print the value with the console.log() function getting called each time.

At last, these are also removed after being executed and now the callback stack is empty.

This is how NodeJS will execute synchronous and asynchronous funtions inside the environment and how the event loop manages to call asynchronous functions.

Conclusion

In this article, you learned the internal working of NodeJS and saw how asynchronous programs get executed.

Now you should understand why the two second time delay function does not block the rest of the program from executing. You also know why the zero second delay function prints the value at last after "End" prints.

That’s all! I hope you enjoyed reading this article and learned something new. Do share this article if you find it useful.

• Callbacks
• Promises
• Async / Await

Here's what we'll cover in this article:

• What is Asynchronous JavaScript?
• Synchronous vs Asynchronous JavaScript
• How Callbacks Work in JavaScript
• How Promises Work in JavaScript
• How Async / Await Works in JavaScript

So let's dive in!

You can watch this tutorial on YouTube as well if you like:

What is Asynchronous JavaScript?

If you want to build projects efficiently, then this concept is for you.

The theory of async JavaScript helps you break down big complex projects into smaller tasks.

Then you can use any of these three techniques – callbacks, promises or Async/await – to run those small tasks in a way that you get the best results.

Let's dive in!🎖️

Synchronous vs Asynchronous JavaScript

What is a Synchronous System?

In a synchronous system, tasks are completed one after another.

Think of this as if you have just one hand to accomplish 10 tasks. So, you have to complete one task at a time.

Take a look at the GIF 👇 – one thing is happening at a time here:

You'll see that until the first image is loaded completely, the second image doesn't start loading.

Well, JavaScript is by default Synchronous [single threaded]. Think about it like this – one thread means one hand with which to do stuff.

What is an Asynchronous System?

In this system, tasks are completed independently.

Here, imagine that for 10 tasks, you have 10 hands. So, each hand can do each task independently and at the same time.

Take a look at the GIF 👇 – you can see that each image loads at the same time.

Again, all the images are loading at their own pace. None of them is waiting for any of the others.

To Summarize Synchronous vs Asynchronous JS:

When three images are on a marathon, in a:

• Synchronous system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.

• Asynchronous system, the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:

Synchronous and Asynchronous Code Examples

Before starting our project, let's look at some examples and clear up any doubts.

Synchronous Code Example

To test a synchronous system, write this code in JavaScript:

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

Here's the result in the console: 👇

Asynchronous code example

Let's say it takes two seconds to eat some ice cream. Now, let's test out an asynchronous system. Write the below code in JavaScript.

Note: Don't worry, we'll discuss the setTimeout() function later in this article.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

And here's the result in the console: 👇

Now that you know the difference between synchronous and async operations, let's build our ice cream shop.

How to Setup our Project

For this project you can just open Codepen.io and start coding. Or, you can do it in VS code or the editor of your choice.

Open the JavaScript section, and then open your developer console. We'll write our code and see the results in the console.

What are Callbacks in JavaScript?

When you nest a function inside another function as an argument, that's called a callback.

Here's an illustration of a callback:

An example of a callback

Don't worry, we'll see some examples of callbacks in a minute.

Why do we use callbacks?

When doing a complex task, we break that task down into smaller steps. To help us establish a relationship between these steps according to time (optional) and order, we use callbacks.

Take a look at this example:👇

Chart contains steps to make ice cream

These are the small steps you need to take to make ice cream. Also note that in this example, the order of the steps and timing are crucial. You can't just chop the fruit and serve ice cream.

At the same time, if a previous step is not completed, we can't move on to the next step.

To explain that in more detail, let's start our ice cream shop business.

But Wait...

The shop will have two parts:

• The storeroom will have all the ingredients [Our Backend]
• We'll produce ice cream in our kitchen [The frontend]

Let's store our data

Now, we're gonna store our ingredients inside an object. Let's start!

You can store the ingredients inside objects like this: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

Our other ingredients are here: 👇

You can store these other ingredients in JavaScript objects like this: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

The entire business depends on what a customer orders. Once we have an order, we start production and then we serve ice cream. So, we'll create two functions ->

• order
• production

This is how it all works: 👇

Get order from customer, fetch ingredients, start production, then serve.

Let's make our functions. We'll use arrow functions here:

let order = () =>{};

let production = () =>{};

Now, let's establish a relationship between these two functions using a callback, like this: 👇

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

Let's do a small test

We'll use the console.log() function to conduct tests to clear up any doubts we might have regarding how we established the relationship between the two functions.

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

To run the test, we'll call the order function. And we'll add the second function named production as its argument.

// name 👇 of our second function
order(production);

Here's the result in our console 👇

Take a break

So far so good – take a break!

Clear out the console.log

Keep this code and remove everything [don't delete our stocks variable]. On our first function, pass another argument so that we can receive the order [Fruit name]:

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);

Here are our steps, and the time each step will take to execute.

Chart contains steps to make ice cream

In this chart, you can see that step 1 is to place the order, which takes 2 seconds. Then step 2 is cut the fruit (2 seconds), step 3 is add water and ice (1 second), step 4 is to start the machine (1 second), step 5 is to select the container (2 seconds), step 6 is to select the toppings (3 seconds) and step 7, the final step, is to serve the ice cream which takes 2 seconds.

To establish the timing, the function setTimeout() is excellent as it is also uses a callback by taking a function as an argument.

Syntax of a setTimeout() function

Now, let's select our fruit and use this function:

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger 👇
order(0, production);

And here's the result in the console: 👇

Note that the result is displayed after 2 seconds.

If you're wondering how we picked strawberry from our stock variable, here's the code with the format 👇

Don't delete anything. Now we'll start writing our production function with the following code.👇 We'll use arrow functions:

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

And here's the result 👇

We'll nest another setTimeout function in our existing setTimeout function to chop the fruit. Like this: 👇

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

And here's the result 👇

If you remember, here are our steps:

Chart contains steps to make ice cream

Let's complete our ice cream production by nesting a function inside another function – this is also known as a callback, remember?

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

And here's the result in the console 👇

Feeling confused?

This is called callback hell. It looks something like this (remember that code just above?): 👇

Illustration of Callback hell

What's the solution to this?

How to Use Promises to Escape Callback Hell

Promises were invented to solve the problem of callback hell and to better handle our tasks.

Take a break

But first, take a break!

This is how a promise looks:

illustration of a promise format

Let's dissect promises together.

An illustration of the life of a promise

As the above charts show, a promise has three states:

• Pending: This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven't ordered anything yet.
• Resolved: This means that your customer has received their food and is happy.
• Rejected: This means that your customer didn't receive their order and left the restaurant.

Let's adopt promises to our ice cream production case study.

But wait...

We need to understand four more things first ->

• Relationship between time and work
• Promise chaining
• Error handling
• The .finally handler

Let's start our ice cream shop and understand each of these concepts one by one by taking baby steps.

Relationship between time and work

If you remember, these are our steps and the time each takes to make ice cream"

Chart contains steps to make ice cream

For this to happen, let's create a variable in JavaScript: 👇

let is_shop_open = true;

Now create a function named order and pass two arguments named time, work:

let order = ( time, work ) =>{

  }

Now, we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

Our promise has 2 parts:

• Resolved [ ice cream delivered ]
• Rejected [ customer didn't get ice cream ]

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

Let's add the time and work factors inside our promise using a setTimeout() function inside our if statement. Follow me 👇

Note: In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

Now, we're gonna use our newly created function to start ice-cream production.

// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

The result 👇 after 2 seconds looks like this:

Good job!

Promise chaining

In this method, we defining what we need to do when the first task is complete using the .then handler. It looks something like this 👇

Illustration of promise chaining using .then handler

The .then handler returns a promise when our original promise is resolved.

Here's an Example:

Let me make it simpler: it's similar to giving instructions to someone. You tell someone to " First do this, then do that, then this other thing, then.., then.., then..." and so on.

• The first task is our original promise.
• The rest of the tasks return our promise once one small bit of work is completed

Let's implement this on our project. At the bottom of your code write the following lines. 👇

Note: don't forget to write the return word inside your .then handler. Otherwise, it won't work properly. If you're curious, try removing the return once we finish the steps:

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

And here's the result: 👇

Using the same system, let's finish our project:👇

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

Here's the result: 👇

Error handling

We need a way to handle errors when something goes wrong. But first, we need to understand the promise cycle:

An illustration of the life of a promise

To catch our errors, let's change our variable to false.

let is_shop_open = false;

Which means our shop is closed. We're not selling ice cream to our customers anymore.

To handle this, we use the .catch handler. Just like .then, it also returns a promise, but only when our original promise is rejected.

A small reminder here:

• .then works when a promise is resolved
• .catch works when a promise is rejected

Go down to the very bottom and write the following code:👇

Just remember that there should be nothing between your previous .then handler and the .catch handler.

.catch(()=>{
  console.log("Customer left")
})

Here's the result:👇

A couple things to note about this code:

• The 1st message is coming from the reject() part of our promise
• The 2nd message is coming from the .catch handler

How to use the .finally() handler

There's something called the finally handler which works regardless of whether our promise was resolved or rejected.

For example: whether we serve no customers or 100 customers, our shop will close at the end of the day

If you're curious to test this, come at very bottom and write this code: 👇

.finally(()=>{
  console.log("end of day")
})

The result:👇

Everyone, please welcome Async / Await~

How Does Async / Await Work in JavaScript?

This is supposed to be the better way to write promises and it helps us keep our code simple and clean.

All you have to do is write the word async before any regular function and it becomes a promise.

But first, take a break

Let's have a look:👇

Promises vs Async/Await in JavaScript

Before async/await, to make a promise we wrote this:

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

Now using async/await, we write one like this:

//👇 the magical keyword
 async function order() {
    // Write code here
 }

But wait......

You need to understand ->

• How to use the try and catch keywords
• How to use the await keyword

How to use the Try and Catch keywords

We use the try keyword to run our code while we use catch to catch our errors. It's the same concept we saw when we looked at promises.

Let's see a comparison. We'll see a small demo of the format, then we'll start coding.

Promises in JS -> resolve or reject

We used resolve and reject in promises like this:

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

Async / Await in JS -> try, catch

When we're using async/await, we use this format:

//👇 Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code

Don't panic, we'll discuss the await keyword next.

Now hopefully you understand the difference between promises and Async / Await.

How to Use JavaScript's Await Keyword

The keyword await makes JavaScript wait until a promise settles and returns its result.

How to use the await keyword in JavaScript

Let's go back to our ice cream shop. We don't know which topping a customer might prefer, chocolate or peanuts. So we need to stop our machine and go and ask our customer what they'd like on their ice cream.

Notice here that only our kitchen is stopped, but our staff outside the kitchen will still do things like:

• doing the dishes
• cleaning the tables
• taking orders, and so on.

An Await Keyword Code Example

Let's create a small promise to ask which topping to use. The process takes three seconds.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

Now, let's create our kitchen function with the async keyword first.

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();

Let's add other tasks below the kitchen() call.

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

And here's the result:

We are literally going outside our kitchen to ask our customer, "what is your topping choice?" In the mean time, other things still get done.

Once, we get their topping choice, we enter the kitchen and finish the job.

Small note

When using Async/ Await, you can also use the .then, .catch, and .finally handlers as well which are a core part of promises.

Let's open our Ice cream shop again

We're gonna create two functions ->

• kitchen: to make ice cream
• time: to assign the amount of time each small task will take.

Let's start! First, create the time function:

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

Now, let's create our kitchen:

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

Let's give small instructions and test if our kitchen function is working or not:

async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();

The result looks like this when the shop is open: 👇

The result looks like this when the shop is closed: 👇

So far so good.

Let's complete our project.

Here's the list of our tasks again: 👇

Chart contains steps to make ice cream

First, open our shop

let is_shop_open = true;

Now write the steps inside our kitchen() function: 👇

async function kitchen(){
    try{
    await time(2000)
    console.log(`${stocks.Fruits[0]} was selected`)

    await time(0000)
    console.log("production has started")

    await time(2000)
    console.log("fruit has been chopped")

    await time(1000)
    console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

    await time(1000)
    console.log("start the machine")

    await time(2000)
    console.log(`ice cream placed on ${stocks.holder[1]}`)

    await time(3000)
    console.log(`${stocks.toppings[0]} as toppings`)

    await time(2000)
    console.log("Serve Ice Cream")
    }

    catch(error){
     console.log("customer left")
    }
}

And here's the result: 👇

Conclusion

Congratulations for reading until the end! In this article you've learned:

• The difference between synchronous and asynchronous systems
• Mechanisms of asynchronous JavaScript using 3 techniques (callbacks, promises, and Async/ Await)

Here's your medal for reading until the end. ❤️

Suggestions and criticisms are highly appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Credits

• Collection of all the images used
• Unicorns, kitty avatar
• tabby cat, Astrologist Woman, girl-holding-flower
• Character emotions

Introduction

queueMicrotask is a new browser API which can be used to convert your synchronous code into async:

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
});

It's similar to what we were doing using setTimeout:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
}, 0);

So what's the use of queueMicrotask when we already have setTimeout ?

queueMicrotask adds the function (task) into a queue and each function is executed one by one (FIFO) after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.

Basically the tasks of queueMicrotask are executed just after current callstack is empty before passing the execution to the event loop.

In the case of setTimeout, each task is executed from the event queue, after control is given to the event loop.

So if we execute setTimeout first and then queueMicrotask, which will be called first? Execute the below code and check out yourself:

setTimeout(() => {
    console.log('hey i am executed asychronously by setTimeout');
},0);

queueMicrotask(() => {
    console.log('hey i am executed asychronously by queueMicrotask');
});

Node.js does the same thing with "process.nextTick".

When to Use It

There is no rule for when to use queueMicrotask, but it can be used cleverly to run a piece of code without stopping the current execution.

For example, let's say we have an array where we are maintaining list of values. After every value is inserted, we sort the array so that searching for values is faster.

var arr=[];

function add(value){
  arr.push(value);
  arr.sort();
}

However, searching for an element is done whenever someone uses a search input box. This means the event handler will be called after control is transferred to the event loop, so sorting the data blocks the execution of other important synchronous code.

Here's how we can use queueMicrotask to improve our code:

var arr = [];

function add(value) {
  arr.push(value);
  queueMicrotask(() => {
    arr.sort();
  })
}

References

• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask

This article goes through my personal journey of discovery and struggle adopting the conventional wisdom as it pertains to asynchronous work on the frontend. With any luck, you will come away with at least a deeper appreciation of 3 tricky cases to handle when crossing the synchronous to asynchronous boundary. And we'll possibly even conclude that you will never want to manually account for these edge cases yourself ever again.

My examples are in React, but I believe they are universal principles that have parallels in all frontend apps.

What is a "Naked Promise" anyway?

To do anything interesting in our app, we will probably use an asynchronous API at some point. In JavaScript, Promises have overtaken callbacks to be the asynchronous API of choice (especially as every platform has come to accept async/await). They have even become part of the "Web platform" - here's a typical example using the Promise-based fetch API in all modern browsers:

function App() {
  const [msg, setMsg] = React.useState('click the button')
  const handler = () =>
    fetch('https://myapi.com/')
      .then((x) => x.json())
      .then(({ msg }) => setMsg(msg))

  return (
    <div className="App">
      <header className="App-header">
        <p>message: {msg}</p>
        <button onClick={handler}> click meeee</button>
      </header>
    </div>
  )
}

Here our button's handler function returns a "naked" Promise - it isn't wrapped by anything, it is just invoked outright so it can do fetch data and set state. This is an extremely common pattern taught in all introductions. This is fine for demo apps, however in the real world users often run into many edge cases this pattern conveniently forgets to account for.

Promises Fail: The Error State

Promises fail. It is too easy to only code for the "happy path" where your network is always working and your API always returns a successful result. Most devs are all too familiar with the uncaught exceptions that arise only in production that make your app seem like it didn't work or is stuck in some kind of loading state. There are ESlint rules to ensure you write .catch handlers on your promises.

This only helps for promises you chain with a .then, but doesn't help when passing a promise to a library you don't control, or when you just call the promise outright.

Either way, ultimately the responsibility for displaying the error state will fall on you, and will look something like this:

function App() {
  const [msg, setMsg] = React.useState('click the button')
  const [err, setErr] = React.useState(null)
  const handler = () => {
    setErr(null)
    fetch('https://myapi.com/')
      .then((x) => x.json())
      .then(({ msg }) => setMsg(msg))
      .catch((err) => setErr(err))
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>message: {msg}</p>
        {err && <pre>{err}</pre>}
        <button onClick={handler}>click meeee</button>
      </header>
    </div>
  )
}

We now have two states to handle for every asynchronous operation in our app!

Promises in Progress: The Loading State

When pinging your APIs on your local machine (for example, with Netlify Dev), it is pretty common to get rapid responses. However, this ignores the fact that API latency may be a good deal slower in real world, especially mobile, environments. When the button is clicked, the promise fires, however there is no visual feedback at all in the UI to tell the user that the click has been registered and the data is inflight. So users often click again, in case they misclicked, and generate yet more API requests. This is a terrible user experience and there is no reason for writing click handlers this way except that it is the default.

You can make your app more responsive (and less frustrating) by offering some form of loading state:

function App() {
  const [msg, setMsg] = React.useState('click the button')
  const [loading, setLoading] = React.useState(false)
  const handler = () => {
    setLoading(true)
    fetch('https://myapi.com/')
      .then((x) => x.json())
      .then(({ msg }) => setMsg(msg))
      .finally(() => setLoading(false))
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>message: {msg}</p>
        {loading && <pre>loading...</pre>}
        <button onClick={handler} disabled={loading}>
          click meeee
        </button>
      </header>
    </div>
  )
}

We now have three states to handle for every asynchronous operation in our app: result, loading, and error state! Oy vey.

Promises are dumb: The Component's State

Once promises fire off, they cannot be canceled. This was a controversial decision at the time, and while platform specific workarounds like abortable fetch exist, it's clear we will never get cancelable promises in the language itself. This causes issues when we fire off promises and then no longer need them, for example when the component it is supposed to update has unmounted (because the user has navigated somewhere else).

In React, this causes a development-only error like:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

# or

Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

You can avoid this memory leak by tracking the mount state of a component:

function App() {
  const [msg, setMsg] = React.useState('click the button')
  const isMounted = React.useRef(true)
  const handler = () => {
    setLoading(true)
    fetch('https://myapi.com/')
      .then((x) => x.json())
      .then(({ msg }) => {
        if (isMounted.current) {
          setMsg(msg)
        }
      })
  }
  React.useEffect(() => {
    return () => (isMounted.current = false)
  })

  return (
    <div className="App">
      <header className="App-header">
        <p>message: {msg}</p>
        <button onClick={handler}>click meeee</button>
      </header>
    </div>
  )
}

We've used a Ref here, as it is closer to the mental model of an instance variable, but you won't notice too much of a difference if you useState instead.

Longtime React users will also remember that isMounted is an antipattern, however tracking _isMounted as an instance variable is still recommended if you don't use cancellable promises. (Which is ALL. THE. TIME.)

For those keeping count, we're now at four states needing to be tracked for a single async operation in a component.

Solution: Just Wrap It

The problem should be pretty clear by now:

In a simple demo, "naked" promises work fine.

In a production situation, you're going to want to implement all these error handling, loading, and mounting tracker states. Again. And again. And again.

Sounds like a good place to use a library, doesn't it?

Fortunately, quite a few exist.

react-async's useAsync hook lets you pass a promiseFn, together with several handy options to add callbacks and other advanced usecases:

import { useAsync } from 'react-async'

const loadCustomer = async ({ customerId }, { signal }) => {
  const res = await fetch(`/api/customers/${customerId}`, { signal })
  if (!res.ok) throw new Error(res)
  return res.json()
}

const MyComponent = () => {
  const { data, error, isLoading } = useAsync({ promiseFn: loadCustomer, customerId: 1 })
  if (isLoading) return 'Loading...'
  if (error) return `Something went wrong: ${error.message}`
  if (data)
    return (
      <div>
        <strong>Loaded some data:</strong>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    )
  return null
}

It also includes a handy useFetch hook you can use in place of the native fetch implementation.

react-use also offers a simple useAsync implementation, where you just pass in a promise (aka async function):

import { useAsync } from 'react-use'

const Demo = ({ url }) => {
  const state = useAsync(async () => {
    const response = await fetch(url)
    const result = await response.text()
    return result
  }, [url])

  return (
    <div>
      {state.loading ? (
        <div>Loading...</div>
      ) : state.error ? (
        <div>Error: {state.error.message}</div>
      ) : (
        <div>Value: {state.value}</div>
      )}
    </div>
  )
}

Lastly, Daishi Kato's react-hooks-async also offers a very nice abort controller for any promises:

import React from 'react'

import { useFetch } from 'react-hooks-async'

const UserInfo = ({ id }) => {
  const url = `https://reqres.in/api/users/${id}?delay=1`
  const { pending, error, result, abort } = useFetch(url)
  if (pending)
    return (
      <div>
        Loading...<button onClick={abort}>Abort</button>
      </div>
    )
  if (error)
    return (
      <div>
        Error: {error.name} {error.message}
      </div>
    )
  if (!result) return <div>No result</div>
  return <div>First Name: {result.data.first_name}</div>
}

const App = () => (
  <div>
    <UserInfo id={'1'} />
    <UserInfo id={'2'} />
  </div>
)

You can also choose to use Observables, either by wrapping your Promise in one or just using them outright.

In any case, you can see the emergent pattern that you'll always want to wrap your promises to use them safely in a production environment. At a meta-level, what's going on here is JavaScript lets you call both synchronous and asynchronous code with the exact same API, which is an unfortunate design constraint. It means that we need wrappers to safely translate asynchronous execution to synchronous variables we care about, especially in an immediate-mode rendering paradigm like React. We have to choose to either write these ourselves every time, or adopt a library.

If you have any further comments and edge cases that I haven't thought of, please get in touch!