<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>promise.all() example with async/await</title>
  </head>
  <body>
    <script>
      // Define function to fetch a file and return it in a usable form
      async function fetchAndDecode(url, type) {
        // Returning the top level promise, so the result of the entire chain is returned out of the function
        let response = await fetch(url);

        let content;

        // Depending on what type of file is being fetched, use the relevant function to decode its contents
        if(type === 'blob') {
          content = await response.blob();
        } else if(type === 'text') {
          content = await response.text();
        }

        return content;
      }

      async function displayContent() {
        // Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
        let coffee = fetchAndDecode('coffee.jpg', 'blob');
        let tea = fetchAndDecode('tea.jpg', 'blob');
        let description = fetchAndDecode('description.txt', 'text');

        // Use Promise.all() to run code only when all three function calls have resolved
        let values = await Promise.all([coffee, tea, description]);

        console.log(values);
        // Store each value returned from the promises in separate variables; create object URLs from the blobs
        let objectURL1 = URL.createObjectURL(values[0]);
        let objectURL2 = URL.createObjectURL(values[1]);
        let descText = values[2];

        // Display the images in <img> elements
        let image1 = document.createElement('img');
        let image2 = document.createElement('img');
        image1.src = objectURL1;
        image2.src = objectURL2;
        document.body.appendChild(image1);
        document.body.appendChild(image2);

        // Display the text in a paragraph
        let para = document.createElement('p');
        para.textContent = descText;
        document.body.appendChild(para);
      };

      displayContent()
      .catch((e) =>
        console.log(e)
      );
    </script>
  </body>
</html>
