Async and Await in JavaScript

JavaScript uses async and await to handle tasks that take time, like fetching data from a website or reading a file. They make the code look simple and easier to understand, even when working with things that don't happen instantly.

Example:

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

Output:

{
  userId: 1,
  id: 1,
  title: "....",
  body: "...."
}

Syntax:

async function functionName() {
  try {
    const result = await someAsyncFunction();
    console.log(result);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

Async Function

The async function allows us to write promise-based code as if it were synchronous. This ensures that the execution thread is not blocked. Async functions always return a promise. If a value is returned that is not a promise, JavaScript automatically wraps it in a resolved promise.

Syntax:

async function myFunction() {
  return "Hello";
}

const getData = async () => {
    let data = "Hello World";
    return data;
}
 
getData().then(data => console.log(data));

Output:

Hello World

Await Keyword

The await keyword is used to wait for a promise to resolve. It can only be used within an async block. await makes the code wait until the promise returns a result, allowing for cleaner and more manageable asynchronous code.

const getData = async () => {
    let y = await "Hello World";
    console.log(y);
}
 
console.log(1);
getData();
console.log(2);

Output:

1
2
Hello World

Key Concepts:

• The async keyword transforms a regular JavaScript function into an asynchronous function, causing it to return a Promise.
• The await keyword is used inside an async function to pause its execution and wait for a Promise to resolve before continuing.

Error Handling in Async/Await

JavaScript provides predefined arguments for handling promises: resolve and reject.

• resolve: Used when an asynchronous task is completed successfully.
• reject: Used when an asynchronous task fails, providing the reason for failure.

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

Advantages of Async and Await

• Improved Readability: Async and Await allow asynchronous code to be written in a synchronous style, making it easier to read and understand.
• Error Handling: Using try/catch blocks with async/await simplifies error handling.
• Avoids Callback Hell: Async and Await prevent nested callbacks and complex promise chains, making the code more linear and readable.
• Better Debugging: Debugging async/await code is more intuitive since it behaves similarly to synchronous code.