You are currently viewing How to Wait for a Promise to Resolve in JavaScript

How to Wait for a Promise to Resolve in JavaScript

JavaScript Wait for Promise to Resolve

Introduction

Asynchronous programming is an essential aspect of JavaScript, and Promises are one of the most popular ways to handle asynchronous code. When dealing with Promises, you may need to wait for them to resolve before continuing with your code. In this article, we will discuss how to wait for Promise to resolve in JavaScript.

How to Wait for a Promise to Resolve in JavaScript?

1. Using async/await:

The easiest way to wait for a Promise to resolve is to use the async/await syntax. This allows you to write asynchronous code that looks synchronous. To use async/await, you must mark the function as async and await the Promise inside it.

async function getData() {
  const result = await fetch('https://example.com/data');
  const data = await result.json();
  return data;
}

getData().then((data) => {
  console.log(data);
});
  • In this above example code, we define an async function called ‘getData()’.
  • Then use the await keyword to wait for the Promise. When you use the await keyword, JavaScript will pause the execution of the async function until the Promise has been resolved. Inside the function, we are using the fetch function to make a network request and return the data as a Promise.
  • Then we extract the JSON data from the response using the result.json() method.
  • Finally, we call the ‘getData’ function and use the .then() method to handle the result of the Promise that is returned by the function. When the Promise resolves, the data will be logged to the console.

2. Using .then():

You can also wait for a Promise to resolve using the .then() method. This method is used to handle the result of a Promise when it resolves.

fetch('https://example.com/data')
  .then((result) => result.json())
  .then((data) => {
    console.log(data);
  });
  • In this above example code, we create the promise using the .then() method and fetch function to make a network request.
  • Then chaining the .then() method to the Promise and passing a callback function that will handle the resolved value.
  • Finally, extract the JSON data from the response using the .json() method and returning it from the first .then() callback function. Then, we are chaining another .then() method to handle the returned data and log it to the console.
  • This approach is useful when you only need to handle the result of a single Promise.
READ ALSO  Javascript Split on Newline

3. Using Promise.all():

If you have multiple Promises that you want to wait for, you can use Promise.all(). This method takes an array of Promises and returns a Promise that resolves when all the Promises in the array have resolved.

const promise1 = fetch('https://example.com/data1');
const promise2 = fetch('https://example.com/data2');

Promise.all([promise1, promise2])
  .then((results) => Promise.all(results.map((result) => result.json())))
  .then((data) => {
    console.log(data);
  });
  • In this example, we are create two Promises called promise1 and promise2 using the fetch function that will make network requests to different URLs.
  • Then use the Promise.all() method to wait for the two Promises promise1 and promise2 to resolve.
  • The .then() method is chained to the Promise.all() method to handle the resolved values of the Promises.
  • The .then() method of the Promise.all() method uses the .map() method to create a new array of Promises that resolve to JSON data. Each Promise in the new array is created using the .json() method on each resolved response.
  • Finally, we handle the array of JSON data and the data array contains two elements, each containing the JSON data for the corresponding request.

The code fetches two resources asynchronously, waits for both of them to resolve, converts the response data to JSON, and then logs an array of JSON data to the console.

Conclusion

Waiting for a Promise to resolve is a common task when working with asynchronous code in JavaScript. You can use async/await, .then(), or Promise.all() to wait for Promises to resolve. By understanding these methods, you can write better asynchronous code that is easier to read and maintain.

Leave a Reply