-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
141 lines (127 loc) · 4.67 KB
/
index.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!-- A webpage that shows that fetch slowly streams in the body of the request. -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Why do we have to await json?</title>
<!-- emoji favicon -->
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤽</text></svg>"
/>
<!-- basic styling -->
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #fbf1c7;
color: #282828;
font-family: monospace;
max-width: 65ch;
margin: 1rem auto;
}
h1 {
font-size: 2.5em;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
button {
background-color: #6200ea;
color: #fff;
border: none;
padding: 15px 30px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background-color: #3700b3;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
button:active {
background-color: #3700b3;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: translateY(0);
}
hr {
border: none;
height: 2px;
background: linear-gradient(to right, #6200ea, #3700b3);
margin: 20px 0;
}
.function-box {
border: solid 2px #6200ea;
margin: 1rem auto;
padding: 1rem;
}
.output-box {
margin: 1rem auto;
padding: 1rem;
color: #fff;
background: linear-gradient(to right, #6200ea, #3700b3);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<h1>Why do we have to await json?</h1>
<div>
<div id="fetch-json-function-box" class="function-box">
Clicking this button will run the function below. You'll need to
LOOK IN THE CONSOLE to see the results.<br /><br />
</div>
<button id="fetch-json">fetch json</button>
</div>
<hr />
<div>
<div id="fetch-stream-function-box" class="function-box"></div>
<button id="fetch-stream">stream json</button>
<div class="output-box">...content will be streamed here...</div>
</div>
</body>
<script>
async function wait(ms) {
return new Promise((res) => setTimeout(res, ms))
}
const fetchJson = async function () {
console.log("making request")
let response = await fetch("/json")
console.log("got response headers, now waiting for the body")
let myObject = await response.json()
console.log("turned the JSON in an object")
console.log(myObject)
}
const fetchStream = async function () {
outputBox.textContent = ""
let response = await fetch("/json")
const decoder = new TextDecoder("utf-8")
for await (const value of response.body) {
const chunk = decoder.decode(value)
outputBox.textContent += chunk
}
}
let fetchJsonButton = document.getElementById("fetch-json")
let fetchStreamButton = document.getElementById("fetch-stream")
let fetchJsonFunctionBox = document.getElementById(
"fetch-json-function-box"
)
let fetchStreamFunctionBox = document.getElementById(
"fetch-stream-function-box"
)
let outputBox = document.querySelector(".output-box")
// show the user what the functions do
fetchJsonFunctionBox.innerText += fetchJson.toString()
fetchStreamFunctionBox.innerText += fetchStream.toString()
fetchJsonButton.addEventListener("click", fetchJson)
fetchStreamButton.addEventListener("click", fetchStream)
</script>
</html>