Understanding Promises and Async/Await in JavaScript

JavaScript provides powerful tools to handle asynchronous operations: Promises and async/await. In this blog, we’ll explore both, how they work, and when to use them.

What is a Promise?

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises simplify working with asynchronous code by avoiding deeply nested callbacks (also known as "callback hell").

Creating a Promise

Here’s a simple example of creating and using a Promise:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    const success = true // Simulate success or failure
    setTimeout(() => {
      if (success) {
        resolve('Data fetched successfully!')
      } else {
        reject('Failed to fetch data.')
      }
    }, 2000)
  })
}

// Using the Promise
fetchData()
  .then((data) => {
    console.log(data) // Logs: "Data fetched successfully!"
  })
  .catch((error) => {
    console.error(error) // Logs: "Failed to fetch data."
  })

Explanation

1. The fetchData function returns a Promise.
2. Inside the Promise:
   • resolve() is called on success.
   • reject() is called on failure.
3. The .then() method handles the resolved value.
4. The .catch() method handles any errors.

Async/Await: A Better Way to Handle Promises

Async/await is syntactic sugar built on top of Promises, making asynchronous code easier to read and write.

Using Async/Await

Here’s the same example rewritten using async/await:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    const success = true
    setTimeout(() => {
      if (success) {
        resolve('Data fetched successfully!')
      } else {
        reject('Failed to fetch data.')
      }
    }, 2000)
  })
}

const getData = async () => {
  try {
    const data = await fetchData()
    console.log(data) // Logs: "Data fetched successfully!"
  } catch (error) {
    console.error(error) // Logs: "Failed to fetch data."
  }
}

getData()

Explanation:

1. async Function: The getData function is marked as async, allowing the use of await.
2. await Keyword: Pauses execution until the Promise resolves.
3. Error Handling: Use try...catch to handle errors.

Key Differences: Promises vs. Async/Await

Combining Promises and Async/Await

You can mix Promises and async/await for more advanced use cases. Here’s an example of fetching multiple pieces of data:

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

const fetchPosts = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(['Post 1', 'Post 2']), 1500)
  })
}

const fetchAllData = async () => {
  try {
    const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])
    console.log('User:', user)
    console.log('Posts:', posts)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

fetchAllData()

Explanation

• Promise.all(): Runs multiple Promises concurrently.
• The await pauses execution until all Promises resolve.

Real-World Example: Fetching Data from an API

Here’s how you can fetch data from an API using async/await:

const fetchApiData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('API Error:', error)
  }
}

fetchApiData()

Explanation:

1. The fetch function returns a Promise.
2. The await keyword waits for the response.
3. The .json() method processes the response body.

When to Use Promises vs. Async/Await

• Use Promises when:
  • You need method chaining or composability (e.g., .then()).
  • Working with older codebases or libraries that use Promises.
• Use Async/Await when:
  • You want cleaner, more readable code.
  • Handling sequential or dependent asynchronous operations.

Conclusion

Promises and async/await are essential tools for handling asynchronous operations in JavaScript. While Promises offer flexibility and composability, async/await provides cleaner and more readable code.

Key Takeaways:

• Promises simplify asynchronous operations using .then() and .catch().
• Async/Await makes asynchronous code look synchronous and is easier to read.
• Combine both for advanced use cases like parallel execution.
• Explore more about Promises and Async/Await in the MDN Documentation.