Why is not this promise catch fired in my promises array

Question

I learn React JavaScript and have this Codesandbox where I don't understand why the error is not shown

Here in the watchProgress the catch is not fired but it's fired in the promise so I do something wrong

function watchProgress(promArray) {
    let progress = 0;
    promArray.forEach(p => {
        p.then(result => {
            progress += 1;
            const percentCorrect = (progress / promArray.length) * 100;
            const math = Math.floor(percentCorrect);
            setProgressValue(math);
            console.log(`name ${result.name}`);
        }).catch(err => {
            console.log(`err ${err}`);
        });
    });
}

Select a file with the file picker
Watch the log for err
The log show the error inside the promise but not err when I loop through all

Update

I try something like this but I get TypeError: p.then is not a function

Promise.all(promArray)
    .then(arr => {
        arr.forEach(p => {
            p.then(result => {
                progress += 1;
                const percentCorrect = (progress / promArray.length) * 100;
                const math = Math.floor(percentCorrect);
                // console.log(`setProgressValue ${math}`);
                // console.log(`count ${progress}`);
                setProgressValue(math);
                console.log(`name ${result.name}`);
            }).catch(err => {
                console.log(`err ${err}`);
            });
        });
    })
    .catch(err => {
        console.log(`err ${err}`);
    });

sakshya73 · Answer 1 · 2021-03-31T18:36:22.447

1

instead of using forEach you should use Promise.all and after the promises are resolved then you can through loop it.

let progress = 0;
Promise.all(promArray).then((promArray) => {
  promArray.forEach(p => {
    progress += 1;
    const percentCorrect = (progress / promArray.length) * 100;
    const math = Math.floor(percentCorrect);
    setProgressValue(math);
  })
}).catch(err => {
        console.log(`err ${err}`);
   });

edited Mar 31 '21 at 18:36

answered Mar 31 '21 at 18:19

sakshya73

5,570
5
22
41

Thanks but I need also to do the progressbar setProgressValue(math); and also handle catch error that's why `forEach` – Kid Mar 31 '21 at 18:24
1

you cant do it with foreach because its async and will result in unwanted behaviour. – Michael Mar 31 '21 at 18:28
nice I did not know that, but `err` is not fired how can I catch that – Kid Mar 31 '21 at 19:03
I update me question with some test code but I get TypeError: p.then is not a function – Kid Mar 31 '21 at 22:09
its because the promises has been resolved and it has returned the array of responses...now you can't do .then() to that....you just need to use that response. – sakshya73 Apr 01 '21 at 04:42
This answer does not answer the OP – Erik Apr 01 '21 at 09:22
@saksh73 but how can I catch error if I cant use `.then` or `.catch` – Kid Apr 01 '21 at 11:35
1

@Kid - You can take a look at this https://stackoverflow.com/questions/30362733/handling-errors-in-promise-all – sakshya73 Apr 01 '21 at 11:42
@saksh73 Thanks I read it and the ` Promise.all` that he use cant individually give error message on lets say 10 promises in a promArray it will resolve all ok or give one error for all. I load files like jpg images and show them in a table row, I need to know if individual files have failed some test – Kid Apr 01 '21 at 12:32

score 1 · Answer 2 · answered Mar 31 '21 at 18:37

1

Instead of forEach, you should use reduce.

You can read this article: https://css-tricks.com/why-using-reduce-to-sequentially-resolve-promises-works/

answered Mar 31 '21 at 18:37

Zunayed Shahriar

2,557
2
12
15

Why is not this promise catch fired in my promises array

Update

2 Answers2