1<!DOCTYPE html>
2<html>
3<head>
4 <title>Promises test</title>
5 <link rel="stylesheet" href="styles.css">
6</head>
7<body>
8 <div class="network-fake">
9 <label><input type="checkbox"> Fake network delay</label>
10 </div>
11 <div class="story"></div>
12 <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
13 <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
14 </svg>
15
16 <script src="promise-2.0.4.min.js"></script>
17 <script src="utils.js"></script>
18 <script>
19 getJson('story.json').then(function(story) {
20 addHtmlToPage(story.heading);
21
22 // Take an array of promises and wait on them all
23 return Promise.all(
24 // Map our array of chapter urls
25 // to an array of chapter json promises
26 story.chapterUrls.map(getJson)
27 );
28 }).then(function(chapters) {
29 // Now we have the chapters jsons in order! Loop thorugh…
30 chapters.forEach(function(chapter) {
31 // …and add to the page
32 addHtmlToPage(chapter.html);
33 });
34 addTextToPage("All done");
35 }).catch(function(err) {
36 // catch any error that happened along the way
37 addTextToPage("Argh, broken: " + err.message);
38 }).then(function() {
39 document.querySelector('.spinner').style.display = 'none';
40 });
41 </script>
42</body>
43</html>