learning-jsdp/ch09/async_promise_sequential_execution.html at main · addyosmani/learning-jsdp · GitHub

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise Sequential Execution in JavaScript</title>
    <style>
        button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<!--
In this example, we have a button that demonstrates promise sequential execution. The "Fetch Data Sequentially" button fetches data from two different endpoints sequentially using the Promise.resolve method. The fetched data is then displayed in a formatted way.
-->

    <h1>Promise Sequential Execution in JavaScript</h1>
    <p>Click the button below to demonstrate promise sequential execution:</p>
    <button id="fetchSequential">Fetch Data Sequentially</button>
    <pre id="output"></pre>
    <script>
        const output = document.getElementById('output');
        const apiUrl1 = 'https://jsonplaceholder.typicode.com/todos/1';
        const apiUrl2 = 'https://jsonplaceholder.typicode.com/todos/2';

        function printResult(result) {
            output.innerText = JSON.stringify(result, null, 2);
        }

        // Fetch data
        function fetchData(url) {
            return new Promise((resolve, reject) => {
                fetch(url)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => resolve(data))
                    .catch(error => reject(error));
            });
        }

        document.getElementById('fetchSequential').addEventListener('click', () => {
            const results = [];

            Promise.resolve()
                .then(() => fetchData(apiUrl1))
                .then(data1 => {
                    results.push(data1);
                    return fetchData(apiUrl2);
                })
                .then(data2 => {
                    results.push(data2);
                    printResult(results);
                })
                .catch(error => {
                    output.innerText = `Error: ${error.message}`;
                });
        });
    </script>
</body>
</html>