fundamentals/getting-started/primers/async-all-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Promises test</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="network-fake">
    <label><input type="checkbox"> Fake network delay</label>
  </div>
  <div class="story"></div>
  <svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
    <circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
  </svg>
  <script src="utils.js"></script>
  <script>
    getJson('story.json').then(function(story) {
      addHtmlToPage(story.heading);

      // Take an array of promises and wait on them all
      return Promise.all(
        // Map our array of chapter urls
        // to an array of chapter json promises
        story.chapterUrls.map(getJson)
      );
    }).then(function(chapters) {
      // Now we have the chapters jsons in order! Loop thorugh…
      chapters.forEach(function(chapter) {
        // …and add to the page
        addHtmlToPage(chapter.html);
      });
      addTextToPage("All done");
    }).catch(function(err) {
      // catch any error that happened along the way
      addTextToPage("Argh, broken: " + err.message);
    }).then(function() {
      document.querySelector('.spinner').style.display = 'none';
    });
  </script>
</body>
</html>