JavaScript Async/Await

Syntax Sugar:

• Async/await provides syntactic sugar on top of Promises, making asynchronous code look and behave more like synchronous code.

Async Functions:

• The async keyword is used to define asynchronous functions, which always return a Promise.

Await Keyword:

• The await keyword is used within async functions to pause execution until a Promise is settled (resolved or rejected).
• It allows waiting for the result of asynchronous operations without blocking the execution of other code.

Error Handling:

• Async/await simplifies error handling by allowing the use of try/catch blocks around asynchronous code.

Example: Async/Await Syntax

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

fetchData();

Concise and Readable:

• Async/await makes asynchronous code more concise and readable, especially for sequential asynchronous operations.

Avoiding Callback Hell:

• Async/await helps avoid callback hell by allowing the use of structured, sequential code without nested callbacks.

Compatibility:

• Async/await is supported in modern JavaScript environments and is widely used in modern web development.

 

Example: Fetching Data from an API

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

fetchData();

Example: Sequential Execution

async function task1() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Task 1 completed');
    }, 1000);
  });
}

async function task2() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Task 2 completed');
    }, 500);
  });
}

async function runTasks() {
  const result1 = await task1();
  console.log(result1);
  
  const result2 = await task2();
  console.log(result2);
}

runTasks();

 

Key Points

• Async/await simplifies asynchronous code execution and error handling in JavaScript.
• It enhances code readability and maintainability, especially for sequential asynchronous operations.
• Async/await is built on top of Promises and provides a more structured and synchronous-like approach to handling asynchronous tasks.