Skip to content

Commit a4e0f0d

Browse files
ericwgreeneericwgreene
committed
added code demos
1 parent a2b5ed4 commit a4e0f0d

File tree

7 files changed

+121
-26
lines changed

7 files changed

+121
-26
lines changed

‎public/demos/ajax.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
// example code of the XHR
3+
const xhr = new XMLHttpRequest();
4+
5+
xhr.addEventListener('readystatechange', () => {
6+
7+
if (xhr.readyState === 4 && xhr.status === 200) {
8+
console.log(JSON.parse(xhr.responseText));
9+
}
10+
11+
});
12+
13+
xhr.open('GET', 'http://localhost:3010/cars');
14+
xhr.send();
15+
16+
17+
// code this api call
18+
// 1. create a myFetch function
19+
// 2. accept 1 argument which is the url
20+
// 3. Return a promise that when resolved output
21+
// the data received from the REST service
22+
myFetch('http://localhost:3010/cars')
23+
.then(cars => console.log(cars));

‎public/demos/async_await.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
3+
<title>Welcome to Introduction to ES2017!</title>
4+
<link rel="icon" href="data:,">
5+
<link href="css/site.css" rel="stylesheet">
6+
7+
<main>
8+
<h1>Welcome to Introduction to ES2017 for React + GraphQL Developers!</h1>
9+
</main>
10+
11+
<script src="js/bundle.js"></script>
12+
13+
<script>
14+
15+
'use strict';
16+
17+
const getCars2 = () =>
18+
fetch('http://localhost:3010/cars')
19+
.then(res => res.json());
20+
21+
22+
// you must specify async to use await in the function
23+
// all async functions return promises
24+
const getCars = async () => {
25+
26+
// call await on anything that returns a promise
27+
const res = await fetch('http://localhost:3010/cars');
28+
const cars = await res.json();
29+
30+
return cars;
31+
};
32+
33+
getCars2().then(cars => console.log(cars));
34+
35+
</script>
36+
37+

‎public/demos/import_cars.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import * as cars from './cars';
2+
3+
4+
cars.getCars().then(cars => console.log(cars));

‎public/demos/promise_helper_functions.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
console.log(Promise.resolve('some data'));
3+
// console.log(Promise.reject('some data'));
4+
5+
6+
// function getCarData() {
7+
8+
// return new Promise(resolve => {
9+
10+
// setTimeout(function() {
11+
// resolve([{ make:'Audi' }]);
12+
// }, 2000);
13+
14+
// });
15+
16+
// }
17+
18+
function getMockCarData() {
19+
return Promise.resolve([{ make:'Tesla' }]);
20+
}
21+
22+
getMockCarData().then(cars => console.log(cars));
23+
24+
25+
26+
27+
const hare = new Promise( (resolve, reject) => {
28+
29+
setTimeout(() => {
30+
resolve('hare');
31+
}, 4000)
32+
33+
} );

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ <h1>Welcome to Introduction to ES2017 for React + GraphQL Developers!</h1>
1414

1515
'use strict';
1616

17+
1718
</script>
1819

1920

‎public/js/app.js‎

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,15 @@
11

2-
console.log(Promise.resolve('some data'));
3-
// console.log(Promise.reject('some data'));
42

3+
// const person = {
4+
// firstName: 'Bob',
5+
// lastName: 'Smith',
6+
// };
57

6-
// function getCarData() {
8+
const firstName = 'Manasa';
79

8-
// return new Promise(resolve => {
9-
10-
// setTimeout(function() {
11-
// resolve([{ make:'Audi' }]);
12-
// }, 2000);
13-
14-
// });
15-
16-
// }
17-
18-
function getMockCarData() {
19-
return Promise.resolve([{ make:'Tesla' }]);
10+
const printName = ({ firstName }, param2, param3) => {
11+
console.log(firstName);
2012
}
2113

22-
getMockCarData().then(cars => console.log(cars));
23-
24-
25-
26-
27-
const hare = new Promise( (resolve, reject) => {
28-
29-
setTimeout(() => {
30-
resolve('hare');
31-
}, 4000)
14+
printName({ firstName });
3215

33-
} );

‎public/js/cars.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
3+
export const getCars = () => {
4+
5+
return fetch('http://localhost:3010/cars')
6+
.then(res => res.json());
7+
8+
};
9+
10+
export const getPeople = () => {
11+
12+
return fetch('http://localhost:3010/people')
13+
.then(res => res.json());
14+
15+
};

0 commit comments

Comments
 (0)