Ignoring failed promises in Promoise.all - reactjs

Question

I am fetching URLs specified in the array and then combine fetched results.
I want to ignore failed fetches.
While are tons of post on the subject:
Wait until all promises complete even if some rejected
https://gist.github.com/nhagen/a1d36b39977822c224b8
I just can't figure our how to apply this to my code, that fetches URLs from the array:
Promise.all (arrayOfBlobs.map (x => fetch (x).then (response => response.json())) )
.then (json => {
json.forEach ( x => {
if (Array.isArray (x)) {
// this json has array of objects
console.log (`Received ${x.length} prospects`)
x.forEach ( y => combinedArray.push (y) )
}
else {
// this json has single prospect object
console.log (`Received single prospect`)
combinedArray.push (x)
}
})
this.setState({loadingTable: false, data: combinedArray})
})
.catch (error => {
console.error (error.message)
this.setState({loadingTable: false, data: combinedArray})
})
For example below did not work:
Promise.all (arrayOfBlobs.map (x => fetch (x).then (response => response.json())) )
.then (json => {
json.forEach ( x => {
if (Array.isArray (x)) {
// this json has array of objects
console.log (`Received ${x.length} prospects`)
x.forEach ( y => combinedArray.push (y) )
}
else {
// this json has single prospect object
console.log (`Received single prospect`)
combinedArray.push (x)
}
})
.catch (e => {console.log (`Failed to fetch due to ${e.message}`)})
this.setState({loadingTable: false, data: combinedArray})
})
.catch (error => {
console.error (error.message)
this.setState({loadingTable: false, data: combinedArray})
})
What do I need to do to modified my code so failed fetches are ignored?

Answer 1

Use Promise.allSettled() it will return that status of fulfilled/rejected with the value.
More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

Answer 2

The catch is supposed to go on the individual fetch promise inside the map:
Promise.all(arrayOfBlobs.map(x =>
fetch(x)
.then(response => response.json())
.catch(e => {
// ^^^^^^^
console.log(`Failed to fetch due to ${e.message}`);
return null; // this value will get into the `json` array
})
))
.then(json => {
const combinedArray = [];
for (const x in json) {
if (Array.isArray(x)) {
// this json has array of objects
console.log (`Received ${x.length} prospects`)
combinedArray.push(...x);
} else if (x != null) {
// this json has single prospect object
console.log (`Received single prospect`)
combinedArray.push(x)
} else { // x == null
console.log(`(ignored error)`)
})
}
this.setState({loadingTable: false, data: combinedArray})
})
Also don't forget to handle http (status code) errors!

Answer 3

A version of Promise.allSettled that removes rejected results:
function allFullfilled(promises) {
const responses = [];
let settledCount = 0;
return new Promise(res => {
for(const promise of promises) {
promise
.then( promiseResult => {
responses.push(promiseResult);
})
.catch(err => {
// ignore
})
.then( () => {
settledCount++;
if (settledCount === promises.length) {
res(responses);
}
});
}
});
}