Heya everyone, I have personally wasted lot of time finding the failed Promise in Promise.all on my office work, which caused a severe issue as the execution stops when a Promise inside Promise.all fails.
Prerequisites: I am going to assume you at least know what Promise & Promise.all is and have written JavaScript before. If you don't know either of these, you can learn it over here
Let's get our hands dirty..!
Initial Code (Without Failure handling):
By default, Promise.all is rejected if any of the Promises are rejected. that's why in the below snippet, we are getting error log instead of results.
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve({success:"promise1 resolved"}), 1000);
});
let promise2 = new Promise((resolve, reject) => {
reject(new Error("error message"));
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => resolve({success:"promise3 resolved"}), 1000);
});
Promise.all([promise1, promise2, promise3]).then(
(results) => {
console.log(results);
},
(error) => console.error(error)
);
O/P: Error: "error message"
Updated Code (Handled Failures):
In the below code snippet, I have defined a promise handler function to handle the failure and return a modified payload with which we could be able to filter and process success records and log the failure records.
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve({ success: "promise1 resolved" }), 1000);
});
let promise2 = new Promise((resolve, reject) => {
reject(new Error("error message"));
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => resolve({ success: "promise3 resolved" }), 1000);
});
const promiseHandler = (promise, index) => {
return promise.then(
(data) => ({ data, status: "resolved" }),
(error) => ({ error, status: "rejected", index })
);
};
Promise.all([promise1, promise2, promise3].map(promiseHandler)).then(
(results) => {
// let resolved = results.filter((result) => result.status === "resolved");
let rejected = results.filter((result) => result.status === "rejected");
console.log(rejected);
},
(error) => console.error(error)
);
O/P: {error:
Error: error message
status: "rejected"
index: 1
}
Now we can easily identify the failed promise by Index.
Hope this is helpful. Let me know your thoughts on the comments :)