Async and Await Function In Javascript

Last Updated on June 26, 2023 by Mayank Dham

In modern JavaScript, asynchronous programming plays a crucial role in handling time-consuming tasks without blocking the execution of other code. Traditionally, callbacks and promises have been used to manage asynchronous operations. However, with the introduction of the async await keywords, JavaScript developers now have a more intuitive and cleaner way to write asynchronous code. In this article, we will explore async await functions, their syntax, and how they simplify asynchronous programming.

Understanding Asynchronous Operations

Before we dive into async await, it’s important to understand the concept of asynchronous operations in JavaScript. Asynchronous operations are tasks that don’t block the execution of other code. Common examples include fetching data from a server, reading and writing to databases, and making API calls.

Traditionally, callbacks and promises have been used to handle asynchronous operations. While effective, they can lead to complex and nested code structures, commonly known as "callback hell" or "promise chaining."

Introducing async await Javascript

The async await keywords were introduced in ECMAScript 2017 (ES8) to simplify asynchronous code and make it more readable and maintainable. The async keyword is used to declare an asynchronous function, and the await keyword is used to pause the execution of the function until a promise is resolved.

Syntax of async and await in Javascript

To use async await, we need to define an async function. An async function always returns a promise, which can be resolved or rejected based on the logic inside the function.

The syntax for declaring an async function is as follows:

async function functionName() {
  // Asynchronous code
  await someAsyncOperation();
  // Continue execution after promise is resolved
}

The await keyword is used to pause the execution of the async function until the promise returned by someAsyncOperation() is resolved. This allows for sequential and synchronous-looking code.

Example Usage of async await in Javascript

Let’s look at an example that demonstrates the use of async await in JavaScript. Consider a simple function that fetches data from an API:

Certainly! Here are the code snippets for the examples mentioned earlier:

Example 1: Async function with setTimeout

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
async function example1() {
  console.log('Start');
  await delay(2000);
  console.log('After 2 seconds');
  await delay(1000);
  console.log('After 1 second');
  return 'Done';
}

example1().then((result) => console.log(result));

Example 2: Async function with fetch

async function example2() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Error fetching data');
    }
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

example2();

Example 3: Async function with Promise.all

function fetchUser(id) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id, name: 'John Doe' });
    }, 1000);
  });
}

function fetchOrders(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(['Order 1', 'Order 2']);
    }, 1500);
  });
}

async function example3() {
  const userPromise = fetchUser(1);
  const ordersPromise = fetchOrders(1);

  const [user, orders] = await Promise.all([userPromise, ordersPromise]);
  console.log('User:', user);
  console.log('Orders:', orders);
}

example3();

Benefits of async and await in Javascript

The async and await keywords provide several benefits for asynchronous programming in JavaScript:

• Readability: async await makes asynchronous code appear more like synchronous code, enhancing its readability and making it easier to understand.

• Error Handling: Error handling becomes simpler with async await, as we can use try-catch blocks to catch and handle exceptions in a more structured manner.

• Sequential Execution: async await allows for sequential execution of asynchronous operations, resulting in code that is easier to reason about and maintain.

• Compatibility with Promises: async await are built on top of promises, so they can be used seamlessly alongside existing promise-based code.

Conclusion
Async await has revolutionized asynchronous programming in JavaScript by simplifying the code structure and making it more readable. They provide an intuitive way to handle asynchronous operations, reducing callback nesting and making error handling more straightforward. By adopting async await, developers can write cleaner and more maintainable code while leveraging the power of asynchronous programming in JavaScript.

Frequently Asked Questions (FAQs)

Q1. What is the difference between async functions and regular functions in JavaScript?
Async functions are a type of function in JavaScript that allows you to write asynchronous code in a more sequential and readable manner. They are declared using the async keyword and always return a promise. Regular functions, on the other hand, execute synchronously and do not handle asynchronous operations without additional mechanisms like callbacks or promises.

Q2. Can async functions be used without the await keyword?
Yes, async functions can be used without the await keyword. However, using await allows you to pause the execution of an async function until a promise is resolved or rejected. If you don’t use await, the function will continue executing without waiting for the resolution of promises, potentially leading to unexpected behavior.

Q3. Can async functions throw errors? How are they handled?
Yes, async functions can throw errors. Inside an async function, you can use throw to explicitly throw an error or let the rejection of a promise inside the function throw an error. To handle errors in async functions, you can use a combination of try and catch blocks. Errors thrown within an async function can be caught and handled using the catch block.

Q4. Are async functions compatible with Promise-based code?
Yes, async functions are fully compatible with promise-based code. In fact, async functions are built on top of promises. You can use await within an async function to wait for the resolution of a promise, and you can also return promises from async functions. This allows you to seamlessly integrate async/await syntax with existing promise-based code.

Q5. Are async functions supported in all JavaScript environments?
Async functions are supported in most modern JavaScript environments, including Node.js and modern web browsers. However, older versions of JavaScript engines may not support async functions. It’s important to check the compatibility of async functions with your target environment or use transpilers like Babel to convert async/await syntax to older JavaScript versions if needed.