We Keep Coding

Promise data and exception handling

I am confused with the use of promise, specifically of its way of data manipulation (passing values from block to block) and exception handling (bubbling up the error). I am trying to learn a right way to use promise and to handle error, something like
Error: A caught error.
at promiseTwo()
at promiseOne()
at subprocess()
at mainprocess()
Here are my two attempts in implementing them:
Attempt 1: Clumsy, deeply nested, and errors are uncaught.
var subprocess = () => {
return new Promise((resolve, reject) => {
promiseOne().then(data1 => {
// Some code with data1, throw some error
promiseTwo().then(data2 => {
// Some code with data1n2, throw some error
promiseThree().then(data3 => {
// Data manipulation with data1, data2, and data3
return resolve(<...>)
}).catch(err3 => { throw err3 })
}.catch(err2n3 => { throw err2n3 }) // >>> ERR: Cannot get err3.
}.catch(err1n2n3 => { return reject(err1n2n3) }) // >>> ERR: Cannot get err3 or err2.
}
}
return new Promise((resolve, reject) => {
subprocess().then(data => {
// TODO
}).catch(allErr => { return reject(allErr) }
}
Attempt 2: Unable to use data from previous promise block.
var subprocess = () => {
return new Promise((resolve, reject) => {
promiseOne()
.then(data1 => {
// Some code with data1, throw some error
return promiseTwo()
})
.then(data2 => {
// Some code with data1n2, throw some error
// >>> ERR: Cannot get data1
return promiseThree()
})
.then(data3 => {
// Data manipulation with data1, data2, and data3
// >>> ERR: Cannot get data1 and data2
return resolve(<...>)
})
.catch(err1n2n3 => {
return reject(err1n2n3)
})
}
}
return new Promise((resolve, reject) => {
subprocess().then(data => {
// Some code, throw some error
}).catch(allErr => { return reject(allErr) }
}
Note: Some of the promise block (i.e. promiseOne, promiseTwo, etc.) are pre-defined so I do not have control over what data they will return. I am sure there are more errors in the attempts (e.g. if returning a function is a right way to do it).
Please help. Thanks.

for this kind of situation, you can combine promises and async-await together.
From the question, it seems we have three promises and one function that executes and handle them.
You can try something like this -
const subProcess = () => {
return new Promise((resolve, reject) => {
// Using IIFE ( You shouldn't put async keyword on promise callbac )
(async () => {
// Use of try catch to handle the errors
try {
await promiseOne()
await promiseTwo()
await promiseThree()
// Additional code if need after them
} catch(err){
// Handle error ( all three promise error will be transferred here )
}
})()
})
}
The above code waits for the promises to execute one by one and also catch error from all three promises if any.
And as #samuei mentioned, you can also use Promise.all() in this.
const subProcess = () => {
return new Promise((resolve, reject) => {
// Using IIFE ( You shouldn't put async keyword on promise callbac )
(async () => {
// Use of try catch to handle the errors
try {
const myPromises = [promiseOne, promiseTwo, promiseThree];
const res = await Promise.all(myPromises);
// Additional code if need after them
} catch(err){
// Handle error ( all three promise error will be transferred here )
}
})()
})
}
And if you don't want to use async-await then you can do something like this as well
const subProcess = () => {
return new Promise((resolve, reject) => {
const myPromises = [];
const myPromises = [promiseOne, promiseTwo, promiseThree];
Promise.all(myPromises)
.then(res => {
// Handle the response
})
.catch(err => {
// Handle the error
})
})
}

It sounds like you're looking for Promise.all, which lets you set a series of promises in motion, then deal with the results when they are all resolved.

Generate an array of promises to run sequentially

I'm trying to generate an array of Promises to run sequentially. I've seen lots of tips on this but can't get it to run in my use case.
export default function generateIcons(){
return new Promise((resolve, reject) => {
const containers = document.querySelectorAll('.html2CanvasTarget')
const promises = containers.map(child => processIcon(child))
promises.reduce((p, fn) => p.then(fn), Promise.resolve())
resolve()
})
}
function processIcon(child){
return new Promise((resolve, reject) => html2canvas(child).
then(canvas => uploadFromCanvas(canvas,
child.childNodes[0].className.split(' ')[1] + '.png'))
.then(resolve).catch(reject))
}
Any tips? This just rejects and I can't see why

Looks like you want to resolve the main promise when the canvases are available for all the child elements. You can use Promise.All() for this.
It should also be noted that the querySelectorAll doesn't return anything you can call the .map on. You will have to create an array from what the querySelectorAll returns - which is a NodeList.
export default function generateIcons(){
return new Promise((resolve, reject) => {
const containers = document.querySelectorAll('.html2CanvasTarget');
const promises = Array.from(containers).map(child => processIcon(child))
Promises.All(promises).then(() => resolve());
})
}

containers is a NodeList, and NodeLists don't have a .map method, which is why your code is throwing an error.
Because processIcon already returns a Promise, there's no need to use the Promise constructor again. html2canvas already returns a Promise too, so there's no need for any Promise constructor anywhere (see What is the explicit promise construction antipattern and how do I avoid it?)
If possible, just await each call of it in a for loop. Because uploadFromCanvas returns a Promise too, and you want to wait for it, return it (or await it) as well:
export default async function generateIcons() {
const containers = document.querySelectorAll('.html2CanvasTarget');
for (const container of containers) {
await processIcon(container);
}
}
function processIcon(child) {
return html2canvas(child, {backgroundColor:null})
.then(canvas => uploadFromCanvas(canvas, child.className.split(' ')[1] + '.png'))
.catch(console.log);
}

As per your question, you can use Q module module for that
You need to take an empty array and push promises into it, and just pass this array in Q method (Q.allSettled), Take a look with an example
const Q = require('q');
const promiseHolder = [];
for (let i = 0; i < 10; i += 1) {
promiseHolder.push('Your Promises');
}
Q.allSettled(promises)
.then((results) => {
results.forEach((result) => {
if (result.state === 'fulfilled') {
const value = result.value;
return value;
}
const reason = result.reason;
throw reason;
});
});
In Q.allSettled() The method you always get the result in .then(). There are 2 states. One for success and one for failure.
Success => state === 'fulfilled', value: 'Whatever your promise return'
Failure => state === 'rejected', reason: 'Whatever your promise thrown'
In this case, you have a number of successful and unsuccessful promises.
There is the second approach which is Promise.all() do the same but the issue is whenever any of promise rejected further promise never called.
const promiseHolder = [];
for (let i = 0; i < 10; i += 1) {
promiseHolder.push('Your Promises');
}
Promise.all(promiseHolder)
.then((results) => {
return results;
})
.catch((err) => {
throw err;
});
In the second approach ( Promise.all()), It consists of all your promises pushed from for loop. If any of promise rejected no more promise called and suddenly you got the state of promise rejection in Promise.all().
Promise.all(promiseHolder)
.then((results) => {
return results;
})
.catch((err) => {
console.log('Promise will reject here', err);
throw err;
});
I hope it helps, Happy Coding :)

Changing callback into a promise chain

I was trying to start using promise chaining (was using callbacks so far), and I wanted to edit this code:
Account.findById(req.user._id,
(err, acc) => {
if (err) console.log(err);
var r = req.body;
acc.fullName = r.fullName;
acc.displayname = r.username;
acc.city = r.city;
acc.province = r.province;
acc.postalCode = r.postalCode;
acc.phone = r.phone;
acc.ageGroup = r.ageGroup;
acc.education = r.education;
acc.lookingForWork = r.lookingForWork;
acc.employmentStatus = r.employmentStatus;
acc.workingWithEOESC = r.workingWithEOESC;
acc.resume = r.resume;
acc.mainWorkExp = r.mainWorkExp;
acc.save();
res.redirect('/seeker');
})
This is what I tried to do:
Account.findById(req.user._id)
.then((err, acc) => {
if (err) console.log(err);
var r = req.body;
acc.fullName = r.fullName;
acc.displayname = r.username;
acc.city = r.city;
acc.province = r.province;
acc.postalCode = r.postalCode;
acc.phone = r.phone;
acc.ageGroup = r.ageGroup;
acc.education = r.education;
acc.lookingForWork = r.lookingForWork;
acc.employmentStatus = r.employmentStatus;
acc.workingWithEOESC = r.workingWithEOESC;
acc.resume = r.resume;
acc.mainWorkExp = r.mainWorkExp;
acc.save();
})
.catch(e => console.log(e))
.then((acc) => {
console.log(acc);
res.redirect('/seeker');
})
});
But the promise version throws a TypeError: Cannot set property 'fullName' of undefined error.
The changes are not being saved and console loging the acc results in undefined. Forgot to add that in the post
I'm just learning promises. What am I missing? The inside code is almost exactly the same.

.then functions in promises can take maxiumum two argument which must be both functions, the first function is when the promise is fullfilled, while the second function is when the promise is rejected, alternatively you can pass in only one function to .then and use .catch to handle any kind of error or a rejected promise
var f1 = acc => console.log(acc); // logs out the acc object;
var f2 = err => console.log(err); // logs out error while executing the promise
.then(f1,f2); // when you do this there is no need for a catch block
// or
.then( acc => {
console.log(acc) // logs out the acc object
}).catch( err => console.log(err) ) //logs out the error
// if you need to handle another value
.then( acc => {
console.log(acc);
return acc.save(); //lets say acc.save() returns an object
}).then( acc => console.log(acc) ); // the value of acc.save() is passed down to the next `.then` block

Callback-based API's have a common convention of using the first argument of the callback function to indicate failure. Promises require no such convention, because they have built-in means of handling failures, so you need to just operate on the first argument, not the second. The second argument will be undefined, resulting in the error you're seeing.
Most of the time when you're translating callback-based code to promise-based code, you want to use this pattern as your basic guide:
// Callback-based:
asyncFn((err, result) => {
if (err) {
// handle failure
} else {
// handle success
}
});
// Promise-based equivalent:
asyncFnPromise()
.then((result) => {
// handle success
}, (err) => {
// handle failure
});
// Alternative promised-based:
asyncFnPromise()
.then((result) => {
// handle success.
// Note that unlike the above, any errors thrown here will trigger
// the `catch` handler below, in addition to actual asyncFnPromise
// failures.
})
.catch((err) => {
// handle failure
});

then is just called on success, therefore there is definetly no error:
then((acc) => {

It is happening because the function 'findById' probably not returning 'promise' and just returning some response.You need to create a 'promise object' in findById function and return it.
findById (){
let promise = new Promise((resolve, reject) => {
Suppose results is yield from some async task, so when
//wanted results occured
resolve(value);
//unwanted result occured
reject(new Error('Something happened!'));
return promise;
}
findById.then(response => {
console.log(response);
}, error => {
console.log(error);
});

Promise then and catch clauses not working

Background
I have a multitude of functions that may or may not return a Promise and that may or may not fail, like in the examples below:
let goodFun = (fruit) => `I like ${fruit}`;
let badFun = (fruit) => {
throw `${fruit} is spoiled!`;
};
let badPromise = (fruit) => new Promise( (fulfil, reject) => {
reject(`Promise failed with ${fruit}`);
});
let goodPromise = (fruit) => new Promise((fulfil, reject) => {
fulfil(`Promise succeeded with ${fruit}`);
});
Because each function may or may not return a promise, which may or may not fail, I modified executeSafe from another StackOverflow post, that takes a function and its arguments as parameters, and then Promisifies the function and its result:
let executeSafe =
(fun, ...args) => Promise.resolve().then(() => {
return fun(...args);
});
My objective with all of this, is to have an asyncFun function that waits for the execution of a batch of functions that were Promisified and then returns whatever came from executing them:
let asyncFun =
(fruit) =>
Promise.all([badFun, goodFun, badPromise, goodPromise].map(
fun => executeSafe(fun, fruit)
)
);
Problem
asyncFun is designed to run the multitude of functions previously described and some of them I actually expect to see fail. To accommodate for this my asyncFun function has a catch clause. This clause only works with badFun and doesn't work with badPromise. The then clause never works.
let executor = () => {
let fruitsArr = ["banana", "orange", "apple"];
let results = [];
for (let fruit of fruitsArr)
results.push(
asyncFun(fruit)
.then(res => {
console.log(res);
})
.catch(error => {
console.log(`Error: ${error}`);
})
);
return Promise.all(results);
};
Not even placing the catch clause in the executor's call catches anything else other than the badFun errors.
executor()
.catch(error => console.log("Failed miserably to catch error!"));
Code
let goodFun = (fruit) => {
return `I like ${fruit}`;
};
let badFun = (fruit) => {
throw `${fruit} is spoiled!`;
};
let badPromise = (fruit) => Promise.resolve().then(() => {
throw `Promise failed with ${fruit}`;
});
let goodPromise = (fruit) => Promise.resolve().then(() => {
return `Promise succeded with ${fruit}`;
});
let executeSafe =
(fun, ...args) => Promise.resolve().then(() => {
return fun(...args);
});
let asyncFun = (fruit) => Promise.all([badFun, goodFun, badPromise, goodPromise].map(fun => executeSafe(fun, fruit)));
let executor = () => {
let fruitsArr = ["banana", "orange", "apple"];
let results = [];
for (let fruit of fruitsArr)
results.push(
asyncFun(fruit)
.then(res => {
console.log(res);
})
.catch(error => {
console.log(`Error: ${error}`);
})
);
return Promise.all(results);
};
executor()
.catch(error => console.log("Failed miserably to catch error!"));
Question:
How to fix my code so that its then and catch clauses in asyncFun work as intended?

The problem here is that you are misunderstanding how Promise.all() works. The way it works is that if all of the promises succeed, it resolves to an array of values. If any of them fail, it rejects with the first error that occurred.
What you seem to be expecting, that the successful ones are caught in the then and the failed ones are caught in the catch, is not possible. A promise either resolves once or it rejects once. It doesn't do both, and it won't do one or the other multiple times. Promise.all() returns a single promise so it will either resolve or reject.
Third party promise libraries do have methods for "settling" an array of promises - basically waiting until they have all done their thing (succeeded or failed), and resolving to an array of the results. You can implement it like this:
// values is an array of promises and/or non-promise values
function allSettled(values) {
let settle =
value => Promise.resolve(value)
.then(result => ({ state: "fulfilled", value: result }))
.catch(error => ({ state: "rejected", reason: error }));
return Promise.all(values.map(settle));
}
// example usage
allSettled(['hello', 'goodbye', Promise.resolve('good'), Promise.reject('bad')])
.then(results => console.log(results));
Then you can use it like below.
On an unrelated note, I've also modified your approach so that you don't need the modified version of executeSave that takes ...args (I think that's a convoluted way to go about it). You can create functions that use the arguments before you pass them into _executeSafe_:
let goodFun = (fruit) => `I like ${fruit}`;
let badFun = (fruit) => {
throw `${fruit} is spoiled!`;
};
let badPromise = (fruit) => Promise.reject(`Promise failed with ${fruit}`);
let goodPromise = (fruit) => Promise.resolve(`Promise succeeded with ${fruit}`);
let executeSafe = fun => Promise.resolve().then(fun);
function allSettled(values) {
let settle =
value => Promise.resolve(value)
.then(result => ({ state: "fulfilled", value: result }))
.catch(error => ({ state: "rejected", reason: error }));
return Promise.all(values.map(settle));
}
let asyncFun =
(fruit) =>
allSettled([badFun, goodFun, badPromise, goodPromise]
.map(fun => () => fun(fruit))
.map(executeSafe)
);
asyncFun("orange").then(results => console.log(results));
Additional side note - if you wanted to use the promisify function from Jared Smith's answer, then you could change your asyncFun function to this:
let asyncFun =
(fruit) =>
allSettled([badFun, goodFun, badPromise, goodPromise]
.map(promisify)
.map(fun => fun(fruit))
);

So this works, catches fine. If the function passed to promisify returns a promise, it just gets passed up the chain.
var fnThatThrows = s => { throw new Error(s) };
var identity = x => x;
var promisify = f => (...args) => new Promise((res, rej) => {
try {
res(f(...args));
} catch (e) {
rej(e);
}
});
var rejected = promisify(fnThatThrows);
rejected("foo").then(_ => console.log("shouldn't see")).catch(e => console.log(e)); // logs error
var succeded = promisify(identity);
succeeded("foo").then(val => console.log(val)); // logs 'foo'
If the promise from the argument function is rejected, that gets passed along too:
var returnsBadPromise = s => Promise.reject(new Error(s));
promisify(returnsBadPromise)("foo").catch(e => console.log(e)); // logs error

Is it safe to resolve a promise multiple times?

I have an i18n service in my application which contains the following code:
var i18nService = function() {
this.ensureLocaleIsLoaded = function() {
if( !this.existingPromise ) {
this.existingPromise = $q.defer();
var deferred = this.existingPromise;
var userLanguage = $( "body" ).data( "language" );
this.userLanguage = userLanguage;
console.log( "Loading locale '" + userLanguage + "' from server..." );
$http( { method:"get", url:"/i18n/" + userLanguage, cache:true } ).success( function( translations ) {
$rootScope.i18n = translations;
deferred.resolve( $rootScope.i18n );
} );
}
if( $rootScope.i18n ) {
this.existingPromise.resolve( $rootScope.i18n );
}
return this.existingPromise.promise;
};
The idea is that the user would call ensureLocaleIsLoaded and wait for the promise to be resolved. But given that the purpose of the function is to only ensure that the locale is loaded, it would be perfectly fine for the user to invoke it several times.
I'm currently just storing a single promise and resolve it if the user calls the function again after the locale has been successfully retrieved from the server.
From what I can tell, this is working as intended, but I'm wondering if this is a proper approach.

As I understand promises at present, this should be 100% fine. The only thing to understand is that once resolved (or rejected), that is it for a defered object - it is done.
If you call then(...) on its promise again, you immediately get the (first) resolved/rejected result.
Additional calls to resolve() will not have any effect.
Below is an executable snippet that covers those use cases:
var p = new Promise((resolve, reject) => {
resolve(1);
reject(2);
resolve(3);
});
p.then(x => console.log('resolved to ' + x))
.catch(x => console.log('never called ' + x));
p.then(x => console.log('one more ' + x));
p.then(x => console.log('two more ' + x));
p.then(x => console.log('three more ' + x));

I faced the same thing a while ago, indeed a promise can be only resolved once, another tries will do nothing (no error, no warning, no then invocation).
I decided to work it around like this:
getUsers(users => showThem(users));
getUsers(callback){
callback(getCachedUsers())
api.getUsers().then(users => callback(users))
}
just pass your function as a callback and invoke it as many times you wish! Hope that makes sense.

There s no clear way to resolve promises multiple times because since it's resolved it's done. The better approach here is to use observer-observable pattern for example i wrote following code that observes socket client event. You can extend this code to met your need
const evokeObjectMethodWithArgs = (methodName, args) => (src) => src[methodName].apply(null, args);
const hasMethodName = (name) => (target = {}) => typeof target[name] === 'function';
const Observable = function (fn) {
const subscribers = [];
this.subscribe = subscribers.push.bind(subscribers);
const observer = {
next: (...args) => subscribers.filter(hasMethodName('next')).forEach(evokeObjectMethodWithArgs('next', args))
};
setTimeout(() => {
try {
fn(observer);
} catch (e) {
subscribers.filter(hasMethodName('error')).forEach(evokeObjectMethodWithArgs('error', e));
}
});
};
const fromEvent = (target, eventName) => new Observable((obs) => target.on(eventName, obs.next));
fromEvent(client, 'document:save').subscribe({
async next(document, docName) {
await writeFilePromise(resolve(dataDir, `${docName}`), document);
client.emit('document:save', document);
}
});

If you need to change the return value of promise, simply return new value in then and chain next then/catch on it
var p1 = new Promise((resolve, reject) => { resolve(1) });
var p2 = p1.then(v => {
console.log("First then, value is", v);
return 2;
});
p2.then(v => {
console.log("Second then, value is", v);
});

You can write tests to confirm the behavior.
By running the following test you can conclude that
The resolve()/reject() call never throw error.
Once settled (rejected), the resolved value (rejected error) will be preserved
regardless of following resolve() or reject() calls.
You can also check my blog post for details.
/* eslint-disable prefer-promise-reject-errors */
const flipPromise = require('flip-promise').default
describe('promise', () => {
test('error catch with resolve', () => new Promise(async (rs, rj) => {
const getPromise = () => new Promise(resolve => {
try {
resolve()
} catch (err) {
rj('error caught in unexpected location')
}
})
try {
await getPromise()
throw new Error('error thrown out side')
} catch (e) {
rs('error caught in expected location')
}
}))
test('error catch with reject', () => new Promise(async (rs, rj) => {
const getPromise = () => new Promise((_resolve, reject) => {
try {
reject()
} catch (err) {
rj('error caught in unexpected location')
}
})
try {
await getPromise()
} catch (e) {
try {
throw new Error('error thrown out side')
} catch (e){
rs('error caught in expected location')
}
}
}))
test('await multiple times resolved promise', async () => {
const pr = Promise.resolve(1)
expect(await pr).toBe(1)
expect(await pr).toBe(1)
})
test('await multiple times rejected promise', async () => {
const pr = Promise.reject(1)
expect(await flipPromise(pr)).toBe(1)
expect(await flipPromise(pr)).toBe(1)
})
test('resolve multiple times', async () => {
const pr = new Promise(resolve => {
resolve(1)
resolve(2)
resolve(3)
})
expect(await pr).toBe(1)
})
test('resolve then reject', async () => {
const pr = new Promise((resolve, reject) => {
resolve(1)
resolve(2)
resolve(3)
reject(4)
})
expect(await pr).toBe(1)
})
test('reject multiple times', async () => {
const pr = new Promise((_resolve, reject) => {
reject(1)
reject(2)
reject(3)
})
expect(await flipPromise(pr)).toBe(1)
})
test('reject then resolve', async () => {
const pr = new Promise((resolve, reject) => {
reject(1)
reject(2)
reject(3)
resolve(4)
})
expect(await flipPromise(pr)).toBe(1)
})
test('constructor is not async', async () => {
let val
let val1
const pr = new Promise(resolve => {
val = 1
setTimeout(() => {
resolve()
val1 = 2
})
})
expect(val).toBe(1)
expect(val1).toBeUndefined()
await pr
expect(val).toBe(1)
expect(val1).toBe(2)
})
})

What you should do is put an ng-if on your main ng-outlet and show a loading spinner instead. Once your locale is loaded the you show the outlet and let the component hierarchy render. This way all of your application can assume that the locale is loaded and no checks are necessary.

No. It is not safe to resolve/reject promise multiple times. It is basically a bug, that is hard to catch, becasue it can be not always reproducible.
There is pattern that can be used to trace such issues in debug time. Great lecture on this topic: Ruben Bridgewater — Error handling: doing it right! (the part related to the question is around 40 min)

see github gist: reuse_promise.js
/*
reuse a promise for multiple resolve()s since promises only resolve once and then never again
*/
import React, { useEffect, useState } from 'react'
export default () => {
const [somePromise, setSomePromise] = useState(promiseCreator())
useEffect(() => {
somePromise.then(data => {
// do things here
setSomePromise(promiseCreator())
})
}, [somePromise])
}
const promiseCreator = () => {
return new Promise((resolve, reject) => {
// do things
resolve(/*data*/)
})
}