Async in Javascript is a complex and confusing concept. In this tutorial, I will help you understand what is wait for a promise to resolve before returning in JS and how to do it. Please carefully read the instructions below.
Wait for a promise to resolve before returning in JS
Let’s see the following example to understand why we should use Wait/Promise in Javascript.
Example:
setTimeout(function() { console.log(1); }, 1000); console.log(2);
Output
2
1
The setTimeout function is executed after 3 seconds. However, Javascript will not wait for 3 seconds, and executing the following statement will result in time loss if multiple requests are made concurrently. Here are some ways to wait for a Promise to resolve before returning in JavaScript.
Using async/await
In functions that include the async keyword, we can use the await keyword to wait for the promise to be resolved before moving on to the following statement.
Syntax:
async function NameFunc(str1, str2) { var promise = new Promise( function(resolve, reject) { resolve({ // Statements }); } ); const result = await promise; return result; }
Parameters:
- srt1, str2: parameters to process the job, which may or may not be present.
- async: makes a callback function that returns a Promise.
- await: makes a callback function that waits for a Promise.
Example:
async function Sum(num1, num2) { var promise = new Promise(resolve => resolve(num1 + num2)); const result = await promise; return result; } var Result = Sum(3, 5); console.log(Result);
Output
Promise {<pending>}
The promise statement “const result = await promise” is executed, and then the return statement is executed.
Usually, Promises return a promise, so we use the .then keyword to read the return value of that function.
Example:
async function Sum(num1, num2) { var promise = new Promise(resolve => resolve(num1 + num2)); return result; } Sum(3, 5).then(num => { console.log(num); });
Output
8
This program calculates the sum of 3 and 5 and prints the return value in the .then
block.
Using chain property in the promise
We can use the chain property in the promise to wait for a promise to resolve before returning to JavaScript.
Syntax:
var promise = new Promise( function(resolve, reject) { resolve(); } ); promise .then(function() { // Processing code }) .then(function(data) { // Processing code }) .catch(function() { // Processing code });
Parameters:
- resolve: return success value.
- reject: return the error value.
We will execute multiple .then blocks on a promise.
Example:
var promise = new Promise( function(resolve, reject) { resolve(); } ); promise .then(function() { return 1; }) .then(function(data) { console.log(data); return 2; }) .then(function(data) { console.log(data); }) .catch(function() {});
Output
1
2
The 2nd .then
the block will get the return value of the 1st .then block. The 3rd .then the block will get the return value of the 3rd .then
block. The following .then
block must wait for the previous .then
block to complete.
Summary
We’ve learned several ways to wait for a promise to resolve before returning in JS. Looking at it is also quite simple, as long as you understand what its use is for and how it works.
Maybe you are interested:
- How to check if type is Boolean using JavaScript
- How to export multiple Classes in JavaScript
- Export all functions from a file in JavaScript
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css