So, I have two promises that I want to print on screen with a 3sec delay in between. How would I achieve it. Below is the code.
const promiseOne = new Promise(function(resolve, reject) {
resolve("Hello")
});
const promiseTwo = new Promise(function(resolve, reject) {
resolve("Good Morning")
});
Promise.all([promiseOne, promiseTwo]).then(function() {
setTimeout(() => {
const response = Promise.all.next();
console.log(response);
}, 3000);
});
I suggest you use a delay function. First you loop through each response in the array and use the delay in between
const promiseOne = new Promise(function(resolve, reject) {
resolve("Hello")
});
const promiseTwo = new Promise(function(resolve, reject) {
resolve("Good Morning")
});
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
Promise.all([promiseOne, promiseTwo]).then(async function(resps) {
for(let res of resps){
console.log(res);
await delay(3000)
}
});
const promiseOne = new Promise(function(resolve, reject) {
resolve("Hello")
});
const promiseTwo = new Promise(function(resolve, reject) {
resolve("Good Morning")
});
Promise.all([promiseOne, promiseTwo]).then(function(all) {
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(all);
}
, 3000);
});
}).then(console.log)
Return new Promise in then, that promise waits for x millisecond and resolve it.
And do anything in next then
If you just want to delay the log then you can add response parameter as explained by #Daniel RodrÃguez Meza.
But if you want to delay response from any one of the promise promiseOne or promiseTwo then you should use setTimeout(() => resolve("Hello"), 300); inside respective promise as shown below. Also do not use setTimeout inside Promise.All.
As per OP's comment I have updated answer to resolve promiseTwo 3 seconds after promiseOne resolves.
Here I've assigned resolve of promiseTwo to global variable resolvePromiseTwo which is used inside promiseOne to resolve promiseTwo after 3 seconds.
Note I have used .then after promiseOne and promiseTwo just to verify output. You can omit both.
let resolvePromiseTwo = null;
const promiseOne = new Promise(function(resolve, reject) {
resolve("Good Morning")
setTimeout(() => resolvePromiseTwo("Hello"), 3000);
}).then(res => {
console.log('promiseOne resolved');
return res;
});
const promiseTwo = new Promise(function(resolve, reject) {
resolvePromiseTwo = resolve;
}).then(res => {
console.log('promiseTwo resolved');
return res;
});
Promise.all([promiseOne, promiseTwo]).then(function(response) {
console.log('Promise.all');
console.log(response);
});
You were pretty close, you just need to receive the value from the results of the Promise.all and then handle that information, like this:
const promiseOne = new Promise(function(resolve) {
resolve("Hello")
});
const promiseTwo = new Promise(function(resolve) {
resolve("Good Morning");
});
Promise.all([promiseOne, promiseTwo])
.then(function(response) {
setTimeout(() => {
console.log(response);
}, 3000);
});
Edit
According to the clarification given by OP what he needs is the following:
After the first promise is resolved, wait 3 seconds and then execute the second promise.
const promiseOne = new Promise(function(resolve) {
resolve("Hello")
});
const promiseTwo = new Promise(function(resolve) {
resolve("Good Morning");
});
async function resolveWithDelay(delay = 3000) {
const res1 = await promiseOne;
console.log(res1);
setTimeout(async () => {
const res2 = await promiseTwo;
console.log(res2);
}, delay);
}
resolveWithDelay();
Related
const promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('promise1');
}, 3000);
});
const promise2 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('promise2');
}, 3000);
});
promise2.then(function(value) {
console.log(value);
promise1.then(function(value) {
console.log(value);
});
});
output: *after 3 seconds, both displays at the same time
promise2
promise1
What i'm expecting is, after 3 seconds, promise2 will be displayed first then after another 3 seconds, promise1 will be displayed because promise1 should only execute after the console log in promise2 .then().
Promises are eager in evaluation, you can make them lazy by wrapping them in a Function.
const promise1 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('promise1');
}, 3000);
});
const promise2 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('promise2');
}, 3000);
});
promise2()
.then(console.log)
.then(() => promise1())
.then(console.log)
I'm using some Promises to fetch some data and I got stuck with this problem on a project.
example1 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo1');
}, 3000);
});
example2 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo2');
}, 3000);
});
doStuff = () => {
const listExample = ['a','b','c'];
let s = "";
listExample.forEach((item,index) => {
console.log(item);
example1().then(() => {
console.log("First");
s = item;
});
example2().then(() => {
console.log("Second");
});
});
console.log("The End");
};
If I call the doStuff function on my code the result is not correct, the result I expected is shown below.
RESULT EXPECTED
a a
b First
c Second
The End b
First First
Second Second
First c
Second First
First Second
Second The End
At the end of the function no matter how I try, the variable s gets returned as "", I expected s to be "c".
It sounds like you want to wait for each Promise to resolve before initializing the next: you can do this by awaiting each of the Promises inside an async function (and you'll have to use a standard for loop to asynchronously iterate with await):
const example1 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo1');
}, 500);
});
const example2 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo2');
}, 500);
});
const doStuff = async () => {
const listExample = ['a','b','c'];
for (let i = 0; i < listExample.length; i++) {
console.log(listExample[i]);
await example1();
const s = listExample[i];
console.log("Fisrt");
await example2();
console.log("Second");
}
console.log("The End");
};
doStuff();
await is only syntax sugar for Promises - it's possible (just a lot harder to read at a glance) to re-write this without async/await:
const example1 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo1');
}, 500);
});
const example2 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo2');
}, 500);
});
const doStuff = () => {
const listExample = ['a','b','c'];
return listExample.reduce((lastPromise, item) => (
lastPromise
.then(() => console.log(item))
.then(example1)
.then(() => console.log("Fisrt"))
.then(example2)
.then(() => console.log('Second'))
), Promise.resolve())
.then(() => console.log("The End"));
};
doStuff();
If you want NOT to wait for each promise to finish before starting the next;
You can use Promise.all() to run something after all your promises have resolved;
example1 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo1');
}, 3000);
});
example2 = () => new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo2');
}, 3000);
});
doStuff = () => {
const listExample = ['a','b','c'];
let s = "";
let promises = []; // hold all the promises
listExample.forEach((item,index) => {
s = item; //moved
promises.push(example1() //add each promise to the array
.then(() => {
console.log(item); //moved
console.log("First");
}));
promises.push(example2() //add each promise to the array
.then(() => {
console.log("Second");
}));
});
Promise.all(promises) //wait for all the promises to finish (returns a promise)
.then(() => console.log("The End"));
return s;
};
doStuff();
I thought I had a pretty good understanding of async await until I tried this:
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('what'), 10000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve('?'), 15000);
});
async function asyncTest() {
console.time();
const p1 = await promise1;
if (p1 === 'what') {
var p2 = await promise2;
}
console.log(p1, p2);
console.timeEnd();
}
asyncTest()
After 15000ms, asyncTest is logging p1 & p2. If instead promise1 and promise2 are transformed into functions that return these promises, execution time is then 25000ms. I have no idea what's going on. Could anyone care to explain this?
The issues is that your Promise callbacks are invoked immediately after you declare them.
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('what'), 10000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve('?'), 15000);
});
At this point, both callbacks have been invoked. 10000ms from this point, promise1 will resolve. 15000ms from this point, promise2 will resolve.
async function asyncTest() {
console.time();
const p1 = await promise1;
if (p1 === 'what') {
var p2 = await promise2;
}
console.log(p1, p2);
console.timeEnd();
}
asyncTest()
At this point, as both callbacks have already been invoked, both will be resolved within 15000ms, which is what you observed.
In order to stretch this to the 25000ms you were expecting, try rewriting the Promises as follows:
const promise1 = () => new Promise((resolve, reject) => {
setTimeout(() => resolve('what'), 10000);
});
const promise2 = () => new Promise((resolve, reject) => {
setTimeout(() => resolve('?'), 15000);
});
Note these are now function expressions that will not be invoked immediately. Then rewrite your asyncTest function to invoke these expressions instead of simply await the already executing Promises:
async function asyncTest() {
console.time();
const p1 = await promise1();
if (p1 === 'what') {
var p2 = await promise2();
}
console.log(p1, p2);
console.timeEnd();
}
This will force promise2 to wait until promise1 is completed before beginning execution.
With the code in its current state:
You run setTimeout and assign a promise that will handle its result to promise1. Immediately after, you do the same thing for promise2.
So promise2 resolves about five seconds after promise1.
If you change the code so that promise1 and promise2 are functions, then:
You run setTimeout return a promise that will handle its result to await. It will wait until the promise resolves 10 seconds later. Then it will assign the result to p1.
Then (i.e. after 10 seconds have passed instead of immediately) it will do the same thing for p2.
In short:
In the first example, you don't wait for promise1 before setting promise2 going.
After making the change you describe, you do await promise1 before setting promise2 going.
In the first example, two promises fire-off instantly at the beginning, and by the time when browser executes line var p2 = await promise2; the promise2 is on-half way to resolve and await statement pauses for 5000 ms.
console.log('promise1 created');
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve('what'), 10000);
});
console.log('promise2 created');
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve('?'), 15000);
});
async function asyncTest() {
console.time();
const p1 = await promise1;
if (p1 === 'what') {
var p2 = await promise2;
}
console.log(p1, p2);
console.timeEnd();
}
asyncTest();
In the second example, you fire promises only when browser reaches the line where the function firing promise is called. So at line var p2 = await promise2(); the second promise is created and await statement pauses for 15000 ms. Thus total execution time is 25000 ms.
const promise1 = () => {
console.log('promise1 created');
return new Promise((resolve, reject) => {
setTimeout(() => resolve('what'), 10000);
})
};
const promise2 = () => {
console.log('promise2 created');
return new Promise((resolve, reject) => {
setTimeout(() => resolve('?'), 15000);
})
};
async function asyncTest() {
console.time();
const p1 = await promise1();
if (p1 === 'what') {
var p2 = await promise2();
}
console.log(p1, p2);
console.timeEnd();
}
asyncTest();
I'm using Promise.all function to resolve the multiple promises concurrently. See the below code -
function check1() {
console.log('check 1 invoked')
return new Promise((resolve, reject) => {
setTimeout(()=> resolve('check1'), 4000);
})
}
function check2() {
console.log('check2 invoked')
return new Promise((resolve, reject) => {
setTimeout(()=> resolve('check2'), 4000);
})
}
var arr = [check1(), check2()];
Promise.all(arr)
.then((response) => console.log('response======>',response))
.catch((error) => console.error('error',error))
The problem with the above approach is that when I create the promise array, The respective functions gets invoked. I want to change the above code in the manner that two functions call only from the promise.all function.
Note - Need to store the promises functions in the array. Like I'm doing as var arr.
This should do it, do not make an array of promises but an array of functions, then map the functions to promises:
function check1() {
console.log('check 1 invoked')
return new Promise((resolve, reject) => {
setTimeout(()=> resolve('check1'), 4000);
})
}
function check2() {
console.log('check2 invoked')
return new Promise((resolve, reject) => {
setTimeout(()=> resolve('check2'), 4000);
})
}
//do not store the promises, store the funciton that creates a promise
var arr = [check1, check2];
Promise.all(
//map functions to promises
arr.map(fn=>fn())
)
.then((response) => console.log('response======>',response))
.catch((error) => console.error('error',error))
You can do in this way too -
var check1 = new Promise((resolve, reject) => {
setTimeout(()=> resolve('check1'), 4000);
});
var check2 = new Promise((resolve, reject) => {
setTimeout(()=> resolve('check2'), 4000);
});
Promise.all([check1, check2]).then(values => {
console.log(values);
}, reason => {
console.log(reason)
});
I'm new to Node js Promise I'm not sure whether I'm using the Promise correctly or not so here is my code.
function print(){
first('first')
.then(second('second'))
.then(third('third'));
}
function first(a){
return new Promise((resolve, reject) => {
var res1 = function (){
resolve(a);
}
});
console.log(a);
}
function second(b){
return new Promise((resolve, reject) => {
var res1 = function (){
resolve(b);
}
});
setTimeout(() => {
console.log(b);
}, 2000);
}
function third(c){
return new Promise((resolve, reject) => {
var res1 = function (){
resolve(c);
}
});
console.log(c);
}
My desired output is
first
second
third
Instead what I get is
first
third
//after two seconds
second
I'm missing something but I can't figure it out please explain me
To get the expected behaviour, you need to resolve inside of the timeout (next to the console log). You also cannot pass arguments into promise chain functions since they need to accept the promise from the previous thennable.
A working snippet is below:
print();
function print(){
first('first')
.then(second)
.then(third);
}
function first(a){
return new Promise((resolve, reject) => {
console.log(a);
resolve(a);
});
}
function second(b){
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("second");
resolve(b);
}, 2000);
});
}
function third(c){
return new Promise((resolve, reject) => {
console.log("third");
resolve(c)
});
}