Promise.allSettled.html

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Promise allSettled</title>
    </head>
<body>
<h2>Javascript Promise allSettled</h2>
<p>The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.</p>

<p>It is typically used when you have multiple asynchronous tasks that are not dependent on one another to complete successfully, or you'd always like to know the result of each promise.</p>
    
    <p>In comparison, the Promise returned by Promise.all() may be more appropriate if the tasks are dependent on each other / if you'd like to immediately reject upon any of them rejecting.</p>
<script>
    let urls = [
        'https://jsonplaceholder.typicode.com/users',
        'https://jsonplaceholder.typicode.com/posts/1'
    ];
    const promise1 = new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.open('GET', urls[0]);
        request.onload = () => {
            if (request.status === 200) {
                resolve(request.response); // we got data here, so resolve the Promise
            } else {
                reject(Error(request.statusText)); // status is not 200 OK, so reject
            }
        };
        request.onerror = () => {
            reject(Error('Error fetching data.')); // error occurred, reject the  Promise
        };

        request.send(); // send the request
    });

    const promise2 = new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.open('GET', urls[1]);
        request.onload = () => {
            if (request.status === 200) {
                resolve(request.response); // we got data here, so resolve the Promise
            } else {
                reject(Error(request.statusText)); // status is not 200 OK, so reject
            }
        };
        request.onerror = () => {
            reject(Error('Error fetching data.')); // error occurred, reject the  Promise
        };

        request.send(); // send the request
    });
    
    Promise.allSettled([promise1, promise2])
    .then(responses => {
        console.log('responses => ', responses);
        // respose will get in string format. JSON.parse is used to convert string to JSON format
        console.log('Promise All Response 1 => ', JSON.parse(responses[0].value)); 
        console.log('Promise All Response 2 => ', JSON.parse(responses[1].value));
    });
</script>
</body>
</html> 