I can see a strange behaviour when all of the request is being failed for multiple javascript Promises to settle with Promise.allSettled, .catch is unable to handle rejection.
const API_URL = "https://jsonplaceholder.typicode.com/";
const spinner = document.getElementById("spinner");
const output = document.getElementById("output");
function queryApi(endpoint){
return fetch(API_URL + endpoint).then(response => {
return response.ok ? response.json() : Promise.reject("Unsuccessful response");
})
}
const promise = Promise.allSettled([
queryApi("_posts"),
queryApi("_comments"),
queryApi("_users")
]);
promise
.then(results => {
console.log(results);
const posts = results[0];
const comments = results[1];
const users = results[2];
const statistics = [];
if(posts.status === 'fulfilled'){
statistics.push(`${posts.value.length} posts`);
}
if(comments.status === 'fulfilled'){
statistics.push(`${comments.value.length} comments`);
}
if(users.status === 'fulfilled'){
statistics.push(`${users.value.length} users`);
}
output.innerText = statistics.join("\n");
})
.catch(error => {
console.warn(error);
output.innerText = ":(";
})
.finally(() => {
spinner.remove();
});
Promise.allSettled() always resolves, even if some promises passed to it reject. It resolves with an array of outcomes for each promise.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled
You can use Promise.all() instead, which will resolve when all passed promises resolve or reject when any passed promise rejects.
The catch statement will be executed when the error occurs. As the Promise.allSettled() always resolves, you can manually throw an error i.e.
if(posts.status === "rejected"){
throw new Error('a status was rejected');
}