To wait for a promise to resolve before returning in JavaScript, you can use the async/await syntax. This syntax allows you to write asynchronous code that looks like synchronous code.
Promises In JavaScript
Promises are used to handle asynchronous operations. When a promise is created, it is in an pending state, meaning that the operation represented by the promise has not yet completed. Once the operation completes, the promise is either resolved (a successful completion) or rejected (an error occurred).
The async/await syntax is built on top of promises. It makes asynchronous code look and feel like synchronous code. The await keyword suspends execution until the promise resolves, then resumes execution and returns the result.
For example, suppose you have a function that fetches data from a remote server. This function returns a promise that is either resolved with the data (if the operation was successful) or rejected with an error (if the operation failed).
To fetch the data and wait for the promise to resolve, you can use the following code:
async function fetchData() {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
const data = await response.json();
console.log(data);
}This code uses the async keyword to define an asynchronous function. The await keyword is used to wait for the fetch() operation to complete. When the operation completes, the resulting data is assigned to the variable data.
Wait For A Promise To Resolve Before Returning In JavaScript
For example, the following code will wait for the promise returned by getData() to resolve before logging the data to the console:
console.log(‘Start of code’);
async function getData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
}
getData().then(data => {
console.log(‘Data: ‘, data);
});
console.log(‘End of code’);In the example above, the console.log(‘Data: ‘, data); statement will only run after the promise returned by getData() has resolved.
The async method returns a promise, so you can use .then() to handle the resolved data.
Wait For Multiple Promises To Resolve Before Returning
If you need to wait for multiple promises to resolve before returning, you can use Promise.all(). This method takes an array of promises and returns a single promise that resolves when all of the promises in the array have resolved.
For example, the following code will wait for both getData() and getMoreData() to resolve before logging the data to the console:
console.log(‘Start of code’);
async function getData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
}
async function getMoreData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/users’);
return data;
}
Promise.all([getData(), getMoreData()]).then(values => {
console.log(‘Data: ‘, values);
});
console.log(‘End of code’);In the example above, the console.log(‘Data: ‘, values); statement will only run after both getData() and getMoreData() have resolved.
You can also use async/await with Promise.all(). The following code does the same thing as the code above, but uses async/await syntax:
console.log(‘Start of code’);
async function getData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
}
async function getMoreData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/users’);
return data;
}
async function getAllData() {
const values = await Promise.all([getData(), getMoreData()]);
console.log(‘Data: ‘, values);
}
getAllData();
console.log(‘End of code’);In the example above, the getAllData() function will wait for both getData() and getMoreData() to resolve before logging the data to the console.
Handle Errors When Using aysnc/await
You can also use async/await with try/catch to handle errors. The following code will try to fetch data from a URL, and will log an error to the console if the fetch fails:
console.log(‘Start of code’);
async function getData() {
try {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
} catch (error) {
console.log(error);
}
}
getData().then(data => {
console.log(‘Data: ‘, data);
});
console.log(‘End of code’);In the example above, if the fetch fails, the catch block will execute and log the error to the console.
If the fetch succeeds, the data will be logged to the console.
You can use Promise.catch() to handle errors in a similar way.
The following code does the same thing as the code above, but uses Promise.catch() to handle errors:
console.log(‘Start of code’);
async function getData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
}
getData().then(data => {
console.log(‘Data: ‘, data);
}).catch(error => {
console.log(error);
});
console.log(‘End of code’);In the example above, if the fetch fails, the catch block will execute and log the error to the console.
If the fetch succeeds, the data will be logged to the console.
Promise.race() To Resolve And Return First Output
You can also use async/await with Promise.race(). This method takes an array of promises and returns a single promise that resolves or rejects as soon as one of the promises in the array resolves or rejects.
For example, the following code will wait for either getData() or getMoreData() to resolve before logging the data to the console:
console.log(‘Start of code’);
async function getData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
}
async function getMoreData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/users’);
return data;
}
Promise.race([getData(), getMoreData()]).then(values => {
console.log(‘Data: ‘, values);
});
console.log(‘End of code’);In the example above, the console.log(‘Data: ‘, values); statement will run as soon as either getData() or getMoreData() has resolved.
If getData() resolves first, the data from that promise will be logged to the console. If getMoreData() resolves first, the data from that promise will be logged to the console.
You can also use async/await with Promise.race(). The following code does the same thing as the code above, but uses async/await syntax:
console.log(‘Start of code’);
async function getData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
return data;
}
async function getMoreData() {
const data = await fetch(‘https://jsonplaceholder.typicode.com/users’);
return data;
}
async function getSomeData() {
const values = await Promise.race([getData(), getMoreData()]);
console.log(‘Data: ‘, values);
}
getSomeData();
console.log(‘End of code’);In the example above, the getSomeData() function will wait for either getData() or getMoreData() to resolve before logging the data to the console.
If getData() resolves first, the data from that promise will be logged to the console. If getMoreData() resolves first, the data from that promise will be logged to the console.
aysnc/await With forEach
You can also use async/await with forEach(). The following code will fetch data from a URL and log the data to the console:
console.log(‘Start of code’);
async function getData() {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
const data = await response.json();
return data;
}
getData().then(data => {
data.forEach(item => {
console.log(‘Data: ‘, item);
});
});
console.log(‘End of code’);In the example above, the data from the fetch request will be logged to the console.
You can also use async/await with forEach(). The following code does the same thing as the code above, but uses async/await syntax:
console.log(‘Start of code’);
async function getData() {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
const data = await response.json();
return data;
}
async function getSomeData() {
const data = await getData();
data.forEach(item => {
console.log(‘Data: ‘, item);
});
}
getSomeData();
console.log(‘End of code’);In the example above, the getSomeData() function will fetch data from a URL and log the data to the console.
async/await With map
You can also use async/await with map(). The following code will fetch data from a URL and log the data to the console:
console.log(‘Start of code’);
async function getData() {
const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’);
const data = await response.json();
return data;
}
getData().then(data => {
const mappedData = data.map(item => {
console.log(‘Data: ‘, item);
return item;
});
});
console.log(‘End of code’);In the example above, the data from the fetch request will be logged to the console.
Conclusion – Wait For A Promise To Resolve Before Returning In JavaScript
In this article, we looked at how to wait for a promise to resolve before returning in JavaScript.
We also looked at how to use async/await with Promise.race() and with forEach().
You can find more information about promises on the MDN web docs.
If you have any questions, please leave a comment below.
The above does not cover request.onerror or request.onsuccess. Does reject() and resolve() cause an immediate return? Seems the Promise will return one or the other, but the types returned are not necessarily the same. In the sample below, resolve(event.target.result) returns an integer. I can’t tell you what the reject() returns.
return await new Promise((resolve, reject) => {
const transaction = this.db.transaction(tableName, “readwrite”);
transaction.onerror = function (event) {
console.log(“addAsync transaction.error detected”);
console.log(event.json());
reject(event.target.error.name);
};
const store = transaction.objectStore(tableName);
console.log(“try to add “);
// var parsed = JSON.stringify(entityToAdd);
console.log(entityToAdd);
console.log(” to ” + tableName);
const request = await store.add(entityToAdd);
request.onerror = function (event) {
console.log(“addAsync store.add error detected”);
cosole.log(“Exception message:”);
console.log(event.json());
reject(event.target.error.name);
};
request.onsuccess = function (event) {
//console.log(“event.target.result is: “);
console.log(“store.add of entityToAdd success”);
resolve(event.target.result);
};