Skip to content

Commit a5e098b

Browse files
remarcmijremarcmij
committed
Prepare for class 22 week 3
1 parent a455aeb commit a5e098b

31 files changed

Lines changed: 276 additions & 43 deletions

File tree

‎src/week2/3-event-loop/app.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,58 @@
77
pressing the button.
88
*/
99

10+
/* global logger */
11+
1012
'use strict';
1113

1214
{
13-
window.logger.enter('outer block');
15+
logger.enter('outer block');
1416

1517
function fetchJSON(url, cb) {
16-
window.logger.enter('fetchJSON');
18+
logger.enter('fetchJSON');
1719

1820
const xhr = new XMLHttpRequest();
1921
xhr.open('GET', url);
2022
xhr.responseType = 'json';
2123
xhr.onload = () => {
22-
window.logger.enter('xhr.onload handler');
24+
logger.enter('xhr.onload handler');
2325
if (xhr.status >= 200 && xhr.status <= 299) {
2426
cb(null, xhr.response);
2527
} else {
2628
cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
2729
}
28-
window.logger.leave('xhr.onload handler');
30+
logger.leave('xhr.onload handler');
2931
};
3032
xhr.onerror = () => {
31-
window.logger.enter('onerror handler');
33+
logger.enter('onerror handler');
3234
cb(new Error('Network request failed'));
33-
window.logger.leave('onerror handler');
35+
logger.leave('onerror handler');
3436
};
3537
xhr.send();
3638

37-
window.logger.leave('fetchJSON');
39+
logger.leave('fetchJSON');
3840
}
3941

4042
function fetchAndRender(url) {
41-
window.logger.enter('fetchAndRender');
43+
logger.enter('fetchAndRender');
4244

4345
const pre = document.getElementById('response');
4446
fetchJSON(url, (err, data) => {
45-
window.logger.enter('fetchJSON callback');
47+
logger.enter('fetchJSON callback');
4648
pre.textContent = err ? err.message : JSON.stringify(data, null, 2);
47-
window.logger.leave('fetchJSON callback');
49+
logger.leave('fetchJSON callback');
4850
});
4951

50-
window.logger.leave('fetchAndRender');
52+
logger.leave('fetchAndRender');
5153
}
5254

5355
function main(url) {
54-
window.logger.enter('main');
56+
logger.enter('main');
5557
const button = document.getElementById('btn-go');
5658
button.addEventListener('click', () => {
57-
window.logger.enter('onclick handler');
59+
logger.enter('onclick handler');
5860
fetchAndRender(url);
59-
window.logger.leave('onclick handler');
61+
logger.leave('onclick handler');
6062
});
6163

6264
const span = document.getElementById('counter');
@@ -67,16 +69,16 @@
6769
span.textContent = counter;
6870
}, 200);
6971

70-
window.logger.leave('main');
72+
logger.leave('main');
7173
}
7274

7375
const NOBEL_PRIZE_API_END_POINT = 'http://api.nobelprize.org/v1/laureate.json?gender=female';
7476

7577
window.onload = () => {
76-
window.logger.enter('window.onload handler');
78+
logger.enter('window.onload handler');
7779
main(NOBEL_PRIZE_API_END_POINT);
78-
window.logger.leave('window.onload handler');
80+
logger.leave('window.onload handler');
7981
};
8082

81-
window.logger.leave('outer block');
83+
logger.leave('outer block');
8284
}

‎src/week2/3-event-loop/logger.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
{
44
const INDENT_SPACES = 2;
5+
const HR = '-'.repeat(12);
56

67
window.logger = {
78
level: 0,
@@ -15,7 +16,7 @@
1516
const indentation = ' '.repeat(this.level * INDENT_SPACES);
1617
console.log(`${indentation}leaving ${name}`);
1718
if (this.level === 0) {
18-
console.log('-'.repeat(40));
19+
console.log(`${HR}WAITING${HR}`);
1920
}
2021
},
2122
};

‎src/week3/1-async/app.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// live-code
2+
3+
'use strict';
4+
5+
{
6+
function synchronousFn() {
7+
return 'SYNCHRONOUS';
8+
}
9+
10+
function resolvedPromiseFn() {
11+
return Promise.resolve('RESOLVE-PROMISE');
12+
}
13+
14+
function rejectedPromiseFn() {
15+
return Promise.reject(new Error('REJECT-PROMISE'));
16+
}
17+
18+
async function asynchronousFn() {
19+
return 'ASYNCHRONOUS';
20+
}
21+
22+
async function asynchronousThrowFn() {
23+
throw new Error('THROW-ERROR');
24+
}
25+
26+
const synchronousResult = synchronousFn();
27+
const resolvedPromiseResult = resolvedPromiseFn();
28+
const rejectedPromiseResult = rejectedPromiseFn();
29+
const asynchronousResult = asynchronousFn();
30+
const asynchronousThrowResult = asynchronousThrowFn();
31+
32+
console.log('synchronousResult', synchronousResult);
33+
console.log('resolvedPromiseResult', resolvedPromiseResult);
34+
console.log('rejectedPromiseResult', rejectedPromiseResult);
35+
console.log('asynchronousResult', asynchronousResult);
36+
console.log('asynchronousThrowResult', asynchronousThrowResult);
37+
}

‎src/week3/1-async/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<titleASYNC</title>
9+
</head>
10+
11+
<body>
12+
<h1>ASYNC</h1>
13+
<script src="./app.js"></script>
14+
</body>
15+
16+
</html>

src/week3/1-async-await/app.js renamed to src/week3/2-async-await/app.js

File renamed without changes.

src/week3/1-async-await/index.html renamed to src/week3/2-async-await/index.html

File renamed without changes.

‎src/week3/2-this/2-new/app.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/week3/3-fetch/app.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
Replace then/catch method chain with async/await and try/catch
3+
*/
4+
5+
'use strict';
6+
7+
{
8+
async function fetchJSON(url) {
9+
const response = await fetch(url);
10+
if (!response.ok) {
11+
throw new Error(`Network error: ${response.status} - ${response.statusText}`);
12+
}
13+
return response.json();
14+
}
15+
16+
async function fetchAndRender(url) {
17+
const pre = document.getElementById('response');
18+
try {
19+
const data = await fetchJSON(url);
20+
pre.textContent = JSON.stringify(data, null, 2);
21+
} catch (err) {
22+
pre.textContent = err.message;
23+
}
24+
}
25+
26+
function main(url) {
27+
const button = document.getElementById('btn-go');
28+
button.addEventListener('click', () => fetchAndRender(url));
29+
30+
const span = document.getElementById('counter');
31+
let counter = 0;
32+
setInterval(() => {
33+
counter += 1;
34+
span.textContent = counter;
35+
}, 200);
36+
}
37+
38+
const NOBEL_PRIZE_API_END_POINT = 'http://api.nobelprize.org/v1/laureate.json?gender=female';
39+
window.onload = () => main(NOBEL_PRIZE_API_END_POINT);
40+
}

‎src/week3/3-fetch/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>XHR-AWAIT</title>
9+
</head>
10+
11+
<body>
12+
<div>
13+
<button id="btn-go">GO</button>
14+
<input type="text">
15+
</div>
16+
<p>Counting:
17+
<span id="counter">0</span>
18+
</p>
19+
<pre id="response"></pre>
20+
<script src="./app.js"></script>
21+
</body>
22+
23+
</html>

‎src/week3/4-event-loop/app.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*
2+
Replace then/catch method chain with async/await and try/catch
3+
*/
4+
5+
/* global logger */
6+
7+
'use strict';
8+
9+
{
10+
logger.enter('outer block');
11+
12+
async function fetchJSON(url) {
13+
logger.enter('fetchJSON');
14+
const response = await fetch(url);
15+
if (!response.ok) {
16+
throw new Error(`Network error: ${response.status} - ${response.statusText}`);
17+
}
18+
const data = await response.json();
19+
logger.leave('fetchJSON');
20+
return data;
21+
}
22+
23+
async function fetchAndRender(url) {
24+
logger.enter('fetchAndRender');
25+
const pre = document.getElementById('response');
26+
try {
27+
const data = await fetchJSON(url);
28+
pre.textContent = JSON.stringify(data, null, 2);
29+
} catch (err) {
30+
pre.textContent = err.message;
31+
}
32+
logger.leave('fetchAndRender');
33+
}
34+
35+
function main(url) {
36+
logger.enter('main');
37+
const button = document.getElementById('btn-go');
38+
button.addEventListener('click', () => fetchAndRender(url));
39+
40+
const span = document.getElementById('counter');
41+
let counter = 0;
42+
setInterval(() => {
43+
counter += 1;
44+
span.textContent = counter;
45+
}, 200);
46+
logger.leave('main');
47+
}
48+
49+
const NOBEL_PRIZE_API_END_POINT = 'http://api.nobelprize.org/v1/laureate.json?gender=female';
50+
window.onload = () => {
51+
logger.enter('window.onload handler');
52+
main(NOBEL_PRIZE_API_END_POINT);
53+
logger.leave('window.onload handler');
54+
};
55+
56+
logger.leave('outer block');
57+
}

0 commit comments

Comments
 (0)