JavaScript Async And Await

What are async and await in JavaScript?

Async and await are syntactic features introduced in ES2017 that allow you to write asynchronous code in a more readable and synchronous-like manner. async is used to declare an asynchronous function, and await is used to pause the execution of the async function until a promise is resolved.

How do you declare an async function?

You can declare an async function by using the async keyword before the function declaration or expression.

async function fetchData() {
  // Function logic here
}

How do you use the await keyword?

The await keyword can only be used inside an async function. It pauses the execution of the async function until the promise is resolved or rejected.

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

fetchData();

What happens if the promise is rejected when using await?

If the promise is rejected, an error will be thrown, and you can handle it using a try...catch block to manage the error gracefully.

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

fetchData();

Can you use multiple await statements in a single async function?

Yes, you can use multiple await statements in an async function to wait for different promises to resolve. However, keep in mind that each await pauses execution sequentially.

async function fetchMultipleData() {
  const userResponse = await fetch('https://api.example.com/user');
  const userData = await userResponse.json();

  const postsResponse = await fetch('https://api.example.com/posts');
  const postsData = await postsResponse.json();

  console.log(userData, postsData);
}

fetchMultipleData();

What is the difference between async/await and promises?

While both async/await and promises handle asynchronous operations, async/await provides a more straightforward and readable syntax. Promises require chaining with .then() and .catch(), while async/await allows you to write code that appears synchronous.

// Using promises
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('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:', error);
  }
}

fetchData();

Can you use await with non-promise values?

Yes, if you use await with a non-promise value, it will convert that value into a resolved promise, allowing you to write code that looks asynchronous even if it's synchronous.

async function example() {
  const value = await 42; // Resolves immediately
  console.log(value); // Outputs: 42
}

example();

How can you handle multiple asynchronous operations concurrently with async/await?

You can use Promise.all() with async/await to handle multiple asynchronous operations concurrently, waiting for all promises to resolve before proceeding.

async function fetchData() {
  const [userResponse, postsResponse] = await Promise.all([
    fetch('https://api.example.com/user'),
    fetch('https://api.example.com/posts')
  ]);

  const userData = await userResponse.json();
  const postsData = await postsResponse.json();

  console.log(userData, postsData);
}

fetchData();

What are some best practices when using async/await?

Best practices include:

• Always use try...catch for error handling within async functions.
• Avoid using await in loops, as it can lead to performance issues. Instead, use Promise.all() when possible.
• Keep async functions small and focused to maintain readability.
• Use descriptive names for async functions to indicate they return a promise.

Can you call an async function without using await?

Yes, you can call an async function without using await, but it will return a promise. You will need to handle the returned promise appropriately, either with .then() and .catch() or with await.

async function fetchData() {
  return 'Data fetched';
}

const result = fetchData();
console.log(result); // Outputs: Promise { 'Data fetched' }
result.then(data => console.log(data)); // Outputs: Data fetched