Using Node 4.x. When you have a Promise.all(promises).then() what is the proper way to resolve the data and pass it to the next .then()?
I want to do something like this:
Promise.all(promises).then(function(data){
// Do something with the data here
}).then(function(data){
// Do more stuff here
});
But I'm not sure how to get the data to the 2nd .then(). I can't use resolve(...) in the first .then(). I figured out I can do this:
return Promise.all(promises).then(function(data){
// Do something with the data here
return data;
}).then(function(data){
// Do more stuff here
});
But that doesn't seem like the proper way to do it... What is the right approach to this?
But that doesn't seem like the proper way to do it..
That is indeed the proper way to do it (or at least a proper way to do it). This is a key aspect of promises, they're a pipeline, and the data can be massaged by the various handlers in the pipeline.
Example:
const promises = [
new Promise(resolve => setTimeout(resolve, 0, 1)),
new Promise(resolve => setTimeout(resolve, 0, 2))
];
Promise.all(promises)
.then(data => {
console.log("First handler", data);
return data.map(entry => entry * 10);
})
.then(data => {
console.log("Second handler", data);
});
(catch handler omitted for brevity. In production code, always either propagate the promise, or handle rejection.)
The output we see from that is:
First handler [1,2]
Second handler [10,20]
...because the first handler gets the resolution of the two promises (1 and 2) as an array, and then creates a new array with each of those multiplied by 10 and returns it. The second handler gets what the first handler returned.
If the additional work you're doing is synchronous, you can also put it in the first handler:
Example:
const promises = [
new Promise(resolve => setTimeout(resolve, 0, 1)),
new Promise(resolve => setTimeout(resolve, 0, 2))
];
Promise.all(promises)
.then(data => {
console.log("Initial data", data);
data = data.map(entry => entry * 10);
console.log("Updated data", data);
return data;
});
...but if it's asynchronous you won't want to do that as it ends up getting nested, and the nesting can quickly get out of hand.
Today NodeJS supports new async/await syntax. This is an easy syntax and makes the life much easier
async function process(promises) { // must be an async function
let x = await Promise.all(promises); // now x will be an array
x = x.map( tmp => tmp * 10); // proccessing the data.
}
const promises = [
new Promise(resolve => setTimeout(resolve, 0, 1)),
new Promise(resolve => setTimeout(resolve, 0, 2))
];
process(promises)
Learn more:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
Your return data approach is correct, that's an example of promise chaining. If you return a promise from your .then() callback, JavaScript will resolve that promise and pass the data to the next then() callback.
Just be careful and make sure you handle errors with .catch(). Promise.all() rejects as soon as one of the promises in the array rejects.
Related
Suppose I have two promises. Normally, the code cannot execute until all these promise are finished. In my code, suppose I have promise1 and promise 2
then I have await promise1 and await promise2. My code won't execute until both these promise are finished. However what I need is that if one of these two is finished then the code can execute and then we can ignore the other one.
That is possible because the code only needs one of these awaits to succeed. Is this possible to implement in javascript (nodejs) ?
Promise.any is what you're looking for:
Promise.any() takes an iterable of Promise objects. It returns a single promise that resolves as soon as any of the promises in the iterable fulfills, with the value of the fulfilled promise. If no promises in the iterable fulfill (if all of the given promises are rejected), then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors.
Example:
const randomDelay = (num) => new Promise((resolve) => setTimeout(() => {
console.log(`${num} is done now`);
resolve(`Random Delay ${num} has finished`);
}, Math.random() * 1000 * 10));
(async() => {
console.log("Starting...");
const result = await Promise.any(new Array(5).fill(0).map((_, index) => randomDelay(index)));
console.log(result);
console.log("Continuing...");
})();
You can use Promise.any() function. You can pass an array of Promises as an input, and it will resolve as soon as first Promise resolves.
(async() => {
let promises = [];
promises.push(new Promise((resolve) => setTimeout(resolve, 100, 'quick')))
promises.push(new Promise((resolve) => setTimeout(resolve, 500, 'slow')))
const result = await Promise.any(promises);
console.log(result)
})()
Promise.race() or Promise.any()
If one of the promises's status changed whatever rejected or fulfilled, you can use Promise.race()
If you want one of the promises to be fulfilled, you should use
Promise.any()
Promise.any can continue to execute other code if any One Promise will resolved.
let i = 1;
const newPromise = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(`promise${i++} resolved`);
resolve(true);
}, Math.random() * 1000)
});
}
(async() => {
await Promise.any([newPromise(), newPromise()]);
console.log("Code will executes if any promise resolved");
})()
I just wanted to know if it is considered good practice to nest promises like in this example, or is there better alternatives ?
getDatabaseModel.searchId(idNoms).then(function([noms, elements]) {
getDatabaseModel.getLocalisations().then(function(localisations){
getDatabaseModel.getStates().then(function(states){
//Some code
})
})
})
Obviously, your promises are independent. So you should use Promise.all() to make it run parallel with the highest performance.
The Promise.all() method takes an iterable of promises as an input,
and returns a single Promise that resolves to an array of the results
of the input promises
var searchById = getDatabaseModel.searchId(idNoms);
var getLocalisations = getDatabaseModel.getLocalisations();
var getStates = getDatabaseModel.getStates();
var result = Promise.all([searchById, getLocalisations, getStates]);
result.then((values) => {
console.log(values);
});
For example, Let's say each promise takes 1s - So it should be 3s in total, But with Promise.all, actually it just takes 1s in total.
var tick = Date.now();
const log = (v) => console.log(`${v} \n Elapsed: ${Date.now() - tick}`);
log("Staring... ");
var fetchData = (name, ms) => new Promise(resolve => setTimeout(() => resolve(name), ms));
var result = Promise.all(
[
fetchData("searchById", 1000),
fetchData("getLocalisations", 1000),
fetchData("getStates", 1000)
]);
result.then((values) => {
log("Complete...");
console.log(values);
});
Besides, If you're concern about asyn/await with more elegant/concise/read it like sync code, then await keyword much says the code should wait until the async request is finished and then afterward it'll execute the next thing. While those promises are independent. So promise.all is better than in your case.
var tick = Date.now();
const log = (v) => console.log(`${v} \n Elapsed: ${Date.now() - tick}`);
var fetchData = (name, ms) => new Promise(resolve => setTimeout(() => resolve(name), ms));
Run();
async function Run(){
log("Staring... ");
var a = await fetchData("searchById", 1000);
var b = await fetchData("getLocalisations", 1000);
var c = await fetchData("getStates", 1000);
log("Complete...");
console.log([a, b, c]);
}
Promises were made to avoid callback hell, but they are not too good at it too. People like promises until they find async/await. The exact same code can be re-written in async/await as
async getModel(idNoms){
const [noms, elements] = await getDatabaseModel.searchId(idNoms);
const localisations = await getDatabaseModel.getLocalisations();
const state = await getDatabaseModel.getStates():
// do something using localisations & state, it'll work
}
getModel(idNoms);
Learn async/await here
IMO it's a little hard to read and understand. Compare with this:
getDatabaseModel.searchId(idNoms)
.then(([noms, elements]) => getDatabaseModel.getLocalisations())
.then(localization => getDatabaseModel.getStates());
As #deceze pointed out there are two things to note:
These functions are called serially
They don't seem to depend on each other as the noms, elements and localization are not used at all.
With Promise.all you can mix and match however you want:
// Call `searchId` and `getState` at the same time
// Call `getLocalisations` after `searchId` is done
// wait for all to finish
Promise.all([
getDatabaseModel.searchId(idNoms).then(([noms, elements]) => getDatabaseModel.getLocalisations()),
getDatabaseModel.getStates()
]).then(([result1, result2]) => console.log('done'));
// Call all 3 at the same time
// wait for all to finish
Promise.all([
getDatabaseModel.searchId(idNoms),
getDatabaseModel.getLocalisations(),
getDatabaseModel.getStates(),
]).then(([result1, result2, result3]) => console.log('done'));
I have a snippet that I'm playing around with where I've purposely placed Promise.resolve(c) before Promise.resolve(a) but I am noticing that the true value from bottom Promise.all(...) is being logged first.
const https = require('https');
function getData(substr) {
let url = ``;
return new Promise((resolve, reject) => {
try {
https.get(url, res => {
let s = '';
res.on('data', (d) => {
s += d
});
res.on('end', () => {
let data = JSON.parse(s);
resolve(data);
})
})
} catch (e) {
reject(e);
}
})
}
let a = getData('spiderman');
let b;
let c = getData('superman');
Promise.resolve(c)
.then(value => console.log(value));
Promise.resolve(a)
.then(value => b = value);
Promise.all([a]).then(values => console.log(values[0] === b));
Is there any explanation as to why this is the case? I would think that since Promise.resolve(c) comes first, that the Promise c would resolve first and be logged. Or is there no way to actually rely on the order of the logs aside from using callbacks? What are the best practices to avoid such issues?
These are asynchronous calls that on complete resolve using the supplied function passed into then.
There is no way to force one of these to finish before and if you need that you should be running these synchronous.
When you call .then() this only gets called when the function finished not when the .resolve gets called.
Promise resolution order is not guaranteed. That's kinda the point of asynchronous code.
If you rely on order of execution, you should be using synchronous code.
Use Promise.all() with both requests if you want them both completed before you do your next step.
let a = getData('spiderman');
let c = getData('superman');
Promise.all([a, c]).then(([spidyResults, superResults]) => {
// both have sompleted
// do stuff with each set of results
}).catch(err => console.log('Ooops, one of them failed') );
Well, as said before, the order of the promise completion is not guaranteed, because it's an async operation.
If you really need the execution to follow a certain order you need to put the the next thing to be executed inside then or use async and await which is much cleaner.
I have three promises. I need to combine them together to create one more promise.
Something like this Promise.all('url1','url2','url3') or if there is other possible way to achieve it.
Intent is to fire all of them in parallel.
I have requirement that when either two of them are resolved, then the final one will be resolved.
How I can achieve it?
The following might give you an idea. You have the chance to run the first resolving promise and the last one. But the logic is straightforward and you may play as you wish. I haven't included the error handling rejection logic but that should be fairly easy.
The bring() function returns a promise resolving in 100~200ms.
var bring = n => new Promise(v => setTimeout(v,~~(Math.random()*100)+100,`from url_${n}`)),
pcnt = 0,
proms = Array.from({length: 10})
.map((_,i) => bring(i).then(v => ++pcnt === 1 ? (console.log(`Do stg with the 1st resolving promise ${v} immediately`), [pcnt,v])
: pcnt < proms.length ? console.log(`Do nothing with intermediate resolving promise ${v}`)
: (console.log(`Do stg with the last resolving promise ${v} finally\n`), [pcnt,v])
)
);
Promise.all(proms)
.then(vs => console.log("Or when all completes, deal with the values returned from the first and last promise\n",vs.filter(d => !!d)));
.as-console-wrapper {
max-height: 100% !important
}
So you want to come up with a promise that resolves when, for example, 2 of 3 promises resolve. Promise.all wouldn't be the right thing to use because, well, you aren't waiting for all the promises to resolve. You'd have to do it manually:
const resolveAfterSeconds = function(sec) {
return new Promise(res => {
setTimeout(res, sec * 1000)
})
}
new Promise((resolve) => {
const promises = [
resolveAfterSeconds(1),
resolveAfterSeconds(2),
resolveAfterSeconds(3),
];
let resolveCount = 0;
promises.forEach(prom => {
prom.then(() => {
console.log('resolving');
resolveCount++;
if (resolveCount === promises.length - 1) resolve();
});
});
}).then(() => console.log('done'));
I have two HTTP calls on a page and they are separate altogether.
vm.$onInit = function() {
....
....
//Get all the items only once during initialization
ds.getAllItems().then(function(result){
vm.items = result;
},function(error){
vm.errorInApi = true;
});
.....
.....
}
vm.getTimes = function(){
.....
.....
HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
.....
}
If both the APIs fail then only I need to show a modal.
I can initiate a variable to true and on failure of the APIs, I can make that false and then only show the modal.
But then how long to wait for completion of all the APIs?
Hmm... simply invert the polarity of the promises and use Promise.all().
Promise.all() would normally resolve once all promises resolve, so once the promises are inverted, it resolves once all promises get rejected...
var invert = p => new Promise((v, x) => p.then(x, v));
Promise.all([Promise.reject("Error 404"), Promise.reject("Error WTF")].map(invert))
.then(v => console.log(v));
So as per #guest271314 comment i extend the solution in a silver spoon to show how inverting promises can be applied for this task.
var invert = p => new Promise((v, x) => p.then(x, v)),
prps = [Promise.reject("Error 404"), Promise.reject("Error WTF")]; // previously rejected promises
myButton.addEventListener('click', function(e){
setTimeout(function(...p){
p.push(Promise.reject("Error in Click Event Listener"));
Promise.all(p.map(invert))
.then(r => results.textContent = r.reduce((r,nr) => r + " - " + nr));
}, 200, ...prps);
});
<button id="myButton">Check</button>
<p id="results"></p>
If any of the promises including the previously obtained ones or the once in the event handler gets resolved you will get no output.
You can use async/await and .catch() to determine the number of rejected Promises, perform action if the number is equal to N, where N is the number of rejected Promise values required to perform action.
A prerequisite, as mentioned by #trincot, is to return the Promise from the function and return a value from the function passed to .then(), and throw an Error() from .catch() or function at second parameter of .then() see Why is value undefined at .then() chained to Promise?
const N = 2;
function onInit() {
return Promise.resolve("resolved")
}
function getTimes() {
return Promise.reject("rejected");
}
const first = onInit();
document.querySelector("button")
.onclick = async function() {
let n = 0;
const firstP = await first.catch(() => ++n);
const secondP = await getTimes().catch(() => ++n);
if (n === N) {
// do stuff if `n` is equal to `N`
} else {
// do other stuff
console.log(n, N)
}
};
<button>click</button>
You could use Promise.all.
First you should get the two promises in an array. To achieve that, it is probably useful if your two functions return the promise they create:
vm.$onInit = function() {
....
....
return ds.getAllItems().then(function(result){
vm.items = result;
},function(error){
vm.errorInApi = true;
});
}
vm.getTimes = function(){
.....
.....
return HttpWrapper.send(url,{"operation":'GET'}).then(function(times){
.....
});
}
The array would then be built from the return values:
var arr = [];
arr.push(vm.$onInit());
...
arr.push(vm.getTimes());
You write in a comment that getTimes "is called on some button click", so you would do that second push there.
Or, maybe you see another way to get these promises in an array... it does not matter much how you do it, as long as you achieve this.
Then (in that click handler) you need to detect the situation where both the promises are rejected. Promise.all can do that, but you need to flip the promise results:
// Flip promises so that a rejected one is regarded as fulfilled and vice versa:
arr = arr.map(p => p.then(res => { throw res }).catch(err => err));
// Detect that all original promises rejected, i.e. that the new promises all fulfill.
Promise.all(arr).then(function() {
// execute whatever you need to execute when both ajax calls failed
}).catch(err => err); // ignore