What is async/await and how does it simplify asynchronous code?

TL;DR

async/await is a modern syntax in JavaScript that simplifies working with promises. By using the async keyword before a function, you can use the await keyword inside that function to pause execution until a promise is resolved. This makes asynchronous code look and behave more like synchronous code, making it easier to read and maintain.

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);
  }
}

Introduction to async/await

async/await is a feature introduced in ECMAScript 2017 (ES8) that allows you to write asynchronous code in a more synchronous-looking manner. It is built on top of promises and provides a cleaner and more readable way to handle asynchronous operations.

Using the `async` keyword

The async keyword is used to declare an asynchronous function. When a function is declared as async, it automatically returns a promise. This means you can use the await keyword inside it to pause the execution of the function until a promise is resolved.

async function exampleFunction() {
  return 'Hello, World!';
}

exampleFunction().then(console.log); // Output: Hello, World!

Using the `await` keyword

The await keyword can only be used inside an async function. It pauses the execution of the function until the promise is resolved, and then returns the resolved value. If the promise is rejected, it throws an error, which can be caught using a try...catch block.

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);
  }
}

Simplifying asynchronous code

Before async/await, handling asynchronous operations often involved chaining multiple .then() calls, which could lead to "callback hell" or "pyramid of doom." async/await flattens this structure, making the code more readable and easier to maintain.

Example with promises

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

Example with 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 fetching data:', error);
  }
}

Error handling

Error handling with async/await is more straightforward compared to promises. You can use try...catch blocks to handle errors, making the code cleaner and more intuitive.

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);
  }
}

What is async/await and how does it simplify asynchronous code?

TL;DR