# PromiseAllSettled

Promise.all rejects as a whole if any promise rejects. That’s good for all or nothing cases, when we need all results successful to proceed:

Promise.all([
  fetch('/template.html'),
  fetch('/style.css'),
  fetch('/data.json')
]).then(render); // render method needs results of all fetches
1
2
3
4
5

Instead Promise.allSettled just waits for all promises to settle, regardless of the result. The resulting array has:

  • {status:"fulfilled", value:result} for successful responses,
  • {status:"rejected", reason:error} for errors.

For example, we’d like to fetch the information about multiple users. Even if one request fails, we’re still interested in the others.

Let’s use Promise.allSettled:

        let urls = [
            'https://api.github.com/users/crguezl',
            'https://api.github.com/users/alu0101102726',
            'https://no-such-url'
        ];

        Promise.allSettled(urls.map(url => fetch(url)))
            .then(results => { // *
                results.forEach((result, num) => {
                    if (result.status == "fulfilled") {
                        console.log(`Got ${urls[num]}: ${result.value.status}`);
                    }
                    if (result.status == "rejected") {
                        console.log(`Uhm! "${urls[num]}" not reachable:\n${result.reason}`);
                    }
                });
            });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

The results in the line (*) above will be:

[
  {status: 'fulfilled', value: ...response...},
  {status: 'fulfilled', value: ...response...},
  {status: 'rejected', reason: ...error object...}
]
1
2
3
4
5

So for each promise we get its status and value/error.

Write a function PromiseAllSettled that works as Promise.allSettled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise.allSettled</title>
</head>

<body>
    <h1>Open the Developer tools</h1>
    <script>
        // ...
        const PromiseAllSettled = function (promises) {
         // ...
        };

        let urls = [
            'https://api.github.com/users/iliakan',
            'https://api.github.com/users/remy',
            'https://no-such-url'
        ];

        PromiseAllSettled(urls.map(url => fetch(url)))
            .then(results => { // (*)
                results.forEach((result, num) => {
                    if (result.status == "fulfilled") {
                        console.log(`${urls[num]}: ${result.value.status}`);
                    }
                    if (result.status == "rejected") {
                        console.log(`Uhm! "${urls[num]}" not reachable:\n${result.reason}`);
                    }
                });
            });
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

It is allowed to use Promise.all in your solution

Grading Rubric#

Comments#

Last Updated: 3 months ago