Intro-to-Data-APIs-JS/module1/01_fetch_image/index.html at d88a1c485abcbbebb91daf31bf3ea69e7b394fd8 · CodingTrain/Intro-to-Data-APIs-JS · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Coding Train: Data/APIs 1</title>
  </head>
  <body>
    <h1>Fetch a Rainbow</h1>
    <img src="" id="rainbow" width="480" />
    <script>
      console.log('about to fetch a rainbow');

      catchRainbow();

        // .then(response => {
        //   console.log('yay');
        // })
        // .catch(error => {
        //   console.log('error!');
        //   console.error(error);
        // });

      async function catchRainbow() {
        try{
          const response = await fetch('rainbow.jpg');
        const blob = await response.blob();
        document.getElementById('rainbow').src = URL.createObjectURL(blob);
        console.log('yay');
        }catch(error){
          console.log('error!');
          console.error(error);

        }
      }
    </script>
  </body>
</html>