Skip to content

Commit c332fca

Browse files
elfgoddelfgodd
committed
Section 17: A Better Way Fetch
1 parent a6ab4ac commit c332fca

4 files changed

Lines changed: 118 additions & 1 deletion

File tree

‎17-Making-HTTP-Requests/05/app.css‎

Whitespace-only changes.

‎17-Making-HTTP-Requests/05/app.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// ******************************
2+
// A Better Way Fetch ******************************
3+
// Example 1
4+
5+
console.log('A Better Way Fetch')
6+
7+
// fetch('https://swapi.dev/api/planets/').then((response) => {
8+
// fetch('https://swapi.dev/api/planets9999/')
9+
// .then((response) => {
10+
// console.log(response)
11+
12+
// // This response takes time
13+
// // console.log(response.json())
14+
// if (!response.ok) {
15+
// console.log('ERROR NOT STATUS: 200', response.status)
16+
// } else {
17+
// response.json().then((data) => {
18+
// // console.log(data);
19+
// for (let planet of data.results) {
20+
// console.log(planet.name)
21+
// }
22+
// })
23+
// }
24+
// })
25+
// .catch((err) => {
26+
// console.log('SOMETHING WHEN WRONG WIT FETCH!')
27+
// console.log(err)
28+
// })
29+
30+
// Example 2
31+
// Throwing error to the .catch
32+
fetch('https://swapi.dev/api/planets9999/')
33+
.then((response) => {
34+
if (!response.ok) {
35+
throw new Error(`Status Code Error: ${response.status}`)
36+
} else {
37+
response.json().then((data) => {
38+
// console.log(data);
39+
for (let planet of data.results) {
40+
console.log(planet.name)
41+
}
42+
})
43+
}
44+
})
45+
.catch((err) => {
46+
console.log('SOMETHING WHEN WRONG WIT FETCH!')
47+
console.log(err)
48+
})
49+
50+
// Compare FETCH with XMLHttpRequest()
51+
// const firstReq = new XMLHttpRequest()
52+
53+
// firstReq.addEventListener('load', function () {
54+
// console.log('First Request WORKED!!!')
55+
56+
// const data = JSON.parse(this.responseText)
57+
// const filmURL = data.results[0].films[0]
58+
// const filmReq = new XMLHttpRequest()
59+
// filmReq.addEventListener('load', function() {
60+
// console.log('Second Request WORKED!!!')
61+
// console.log(this);
62+
// const filmData = JSON.parse(this.responseText)
63+
// console.log('filmData: ', filmData)
64+
// })
65+
// filmReq.addEventListener('error', function(e) {
66+
// console.log('ERROR!!', e);
67+
// })
68+
// filmReq.open('GET', filmURL)
69+
// filmReq.send()
70+
71+
// })
72+
// firstReq.addEventListener('error', function () {
73+
// console.log('ERROR!!!')
74+
// })
75+
// firstReq.open('GET', 'https://swapi.dev/api/planets/')
76+
// firstReq.send()
77+
// console.log('Request Sent!')

‎17-Making-HTTP-Requests/05/index.html‎

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

‎17-Making-HTTP-Requests/README.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,4 +141,31 @@ myReq.setRequestHeader('Accept', 'application/json')
141141
myReq.send()
142142
```
143143

144-
## 4. XMLHttpRequests Chaining Requests
144+
## 4. XMLHttpRequests Chaining Requests
145+
146+
## 5. A Better Way Fetch
147+
148+
#### Fetch
149+
150+
- The newer way of making requests via JS
151+
- Supports promises!
152+
153+
```javascript
154+
fetch('https://icanhazdadjoke.com/23/2', {
155+
headers: { Accept: 'application/json' },
156+
})
157+
.then((res) => {
158+
if (res.status !== 200) {
159+
console.log('Problem!', res.status)
160+
return
161+
}
162+
res.json().then((data) => {
163+
console.log(data)
164+
})
165+
})
166+
.catch(function (err) {
167+
console.log('Fetch Error', err)
168+
})
169+
```
170+
171+
#### Fetch API MDN: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

0 commit comments

Comments
 (0)