update to lesson 3

Author: bradwestfall

lessons/02-promises/lecture/NOTES.md

@@ -96,7 +96,7 @@ It would be good to mention that most the time we use promises, we're consumers
 // 6.
 
 // Change the lesson to start
-import fetch from 'node-fetch'
+// import fetch from 'node-fetch'
 
 function getVehicle(url: string) {
   return fetch(url).then((response) => response.json())

lessons/03-request-response/lecture/NOTES.md

@@ -0,0 +1,18 @@
+# Request Response Lecture
+
+Start by getting the attendees familiar with the basics of
+
+```js
+new Request('url')
+new Response()
+```
+
+These are the foundations of what `fetch` operates on.
+
+```js
+// These are the same:
+fetch('site.com')
+
+const req = new Request('site.com')
+fetch(req)
+```

lessons/03-request-response/lecture/index.ts

@@ -0,0 +1,38 @@
+// import { fakeFetch } from './utils'
+
+/****************************************
+  Part One: Request
+*****************************************/
+
+function getPersonVehicles(id: number) {
+  fetch(`https://swapi.dev/api/people/${id}`).then(() => {
+    console.log('Promise is resolved')
+  })
+}
+
+getPersonVehicles(1)
+
+/****************************************
+  Part Two: Response
+*****************************************/
+
+// Docs: "[fetch] resolves to the Response object representing the response to your request."
+// https://developer.mozilla.org/en-US/docs/Web/API/fetch#return_value
+
+// function getPersonVehicles(id: number) {
+//   fetch(`https://swapi.dev/api/people/${id}`).then((stuff) => {
+//     console.log('What is this', stuff)
+//   })
+// }
+
+// getPersonVehicles(1)
+
+/****************************************
+  Custom Fetch
+*****************************************/
+
+// fakeFetch('fake-api')
+//   .then((res) => res.json())
+//   .then((data) => {
+//     console.log(data)
+//   })

lessons/03-request-response/lecture/utils.ts

@@ -0,0 +1,20 @@
+export function fakeFetch(path: string) {
+  const responseData = { hello: 'world' }
+  const res = new Response(JSON.stringify(responseData), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json; charset=utf-8',
+    },
+  })
+  return Promise.resolve(res)
+}
+
+// Note that Response.json() is not the same thing as response.json()
+// The one we're showing here is the static method to do all the same
+// stuff as we did above:
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Response/json_static
+
+// export function fakeFetch(path: string) {
+//   return Promise.resolve(Response.json({ hello: 'world' }))
+// }

lessons/04-async-await/practice/index.final.ts

@@ -1,10 +1,10 @@
-import fetch from 'node-fetch'
+// import fetch from 'node-fetch'
 
-// Each exercise below implements a main() function
+// Each practice below implements a main() function
 main()
 
 /****************************************
-  Exercise: 1
+  Practice: 1
 *****************************************/
 
 function wait(ms: number) {
@@ -21,7 +21,7 @@ async function main() {
 }
 
 /****************************************
-  Exercise: 2
+  Practice: 2
 *****************************************/
 
 // Re-write all functions to use async/await
@@ -51,7 +51,7 @@ async function main() {
 // }
 
 /****************************************
-  Exercise: 3
+  Practice: 3
 *****************************************/
 
 // Your starting point here is actually the solution for the above exercise

lessons/04-async-await/practice/index.ts

@@ -1,4 +1,4 @@
-import fetch from 'node-fetch'
+// import fetch from 'node-fetch'
 
 // Each practice below implements a main() function
 main()

package.json

@@ -8,7 +8,7 @@
     "/////////// LECTURES:": "",
     "lecture-1": "node lessons/01-js-and-node/lecture",
     "lecture-2": "ts-node lessons/02-promises/lecture/index.ts",
-    "lecture-3": "",
+    "lecture-3": "ts-node lessons/03-request-response/lecture/index.ts",
     "lecture-4": "ts-node lessons/04-async-await/lecture/index.ts",
     "lecture-5": "ts-node lessons/05-cli/lecture/index.ts",
     "lecture-6": "nodemon --exec \"ts-node lessons/06-server/lecture/index.ts\" || exit 0",