Javascript | Promises and async/await

Promises and async/await are two powerful features in JavaScript that help to manage asynchronous operations. They allow you to write asynchronous code that looks and behaves more like synchronous code, making it easier to read, write, and maintain.

Let’s start with Promises. A Promise is an object that represents a value that may not be available yet but will be at some point in the future. Promises are commonly used for handling asynchronous operations in JavaScript, such as API calls or database queries.

Here’s an example of creating a Promise in JavaScript:

const fetchData = new Promise((resolve, reject) => {
  // Make an API call to retrieve data
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => resolve(data))
    .catch(error => reject(error))
})

In this example, we have a fetchData Promise that makes an API call to retrieve data. The resolve function is called when the data is successfully retrieved, and the reject function is called if there is an error.

Here’s an example of using a Promise to handle the asynchronous operation:

fetchData.then(data => {
  // Do something with the data
}).catch(error => {
  // Handle any errors
})

In this example, we use the then method to handle the resolved value of the Promise, which in this case is the data retrieved from the API call. If there is an error, we use the catch method to handle it.

here are some of the most common Promise functions that you might find useful:

Promise.all(): This function takes an array of Promises and returns a new Promise that resolves when all of the Promises in the array have resolved. The resolved values are returned in an array in the same order as the original Promises.

const promises = [
  fetchData1(),
  fetchData2(),
  fetchData3()
]

Promise.all(promises)
  .then(results => {
    // Do something with the resolved values
  })
  .catch(error => {
    // Handle any errors
  })

Promise.race(): This function takes an array of Promises and returns a new Promise that resolves or rejects as soon as one of the Promises in the array resolves or rejects. The resolved or rejected value is returned from the Promise.

const promises = [
  fetchData1(),
  fetchData2(),
  fetchData3()
]

Promise.race(promises)
  .then(result => {
    // Do something with the resolved value
  })
  .catch(error => {
    // Handle any errors
  })

Promise.resolve(): This function returns a Promise that is resolved with a given value.

Promise.resolve('Hello, world!')
  .then(value => {
    // Do something with the resolved value
  })
  .catch(error => {
    // Handle any errors
  })

Promise.reject(): This function returns a Promise that is rejected with a given reason.

Promise.reject(new Error('Something went wrong!'))
  .then(value => {
    // This will not be called
  })
  .catch(error => {
    // Handle the rejected Promise
  })

These Promise functions can be used to simplify and streamline your asynchronous code, making it easier to read and maintain.

Now let’s move on to async/await. Async/await is a feature in JavaScript that allows you to write asynchronous code that looks like synchronous code. It uses Promises under the hood but provides a cleaner and more readable syntax for handling them.

Here’s an example of using async/await in JavaScript:

async function fetchData() {
  try {
    // Make an API call to retrieve data
    const response = await fetch('https://example.com/data')
    const data = await response.json()
    return data
  } catch (error) {
    throw new Error(error)
  }
}

In this example, we have an async function called fetchData that makes an API call to retrieve data. We use the await keyword to wait for the Promises to resolve, making the code look like synchronous code. If there is an error, we throw an Error object.

Here’s an example of using async/await to handle the asynchronous operation:

async function main() {
  try {
    const data = await fetchData()
    // Do something with the data
  } catch (error) {
    // Handle any errors
  }
}

main()

In this example, we have a main function that calls the fetchData function using the await keyword. This makes the main function wait for the Promise to resolve before continuing. If there is an error, we handle it using a try/catch block.

Leave a Reply Cancel reply