JS 007 — CRUD GET Communicating With The Server

• Explore the request-response cycle
• Review the differences between Server and Client
• List the different HTTP Verbs + corresponding actions
• Observe how to send GET requests using .fetch()
• Explain what Asynchronous means in JavaScript
• Explain why Promises are important in JavaScript
• Observe:
• Handling promises and errors using .then() and .catch()
• Using json-server to create a local API
• Rendering data to the browser window after a fetch request

Problem: our request are not persisting. Today we are moving away from the client focused approach. So far we have been making changes that only gets persisted within the DOM. It doesn’t get persisted to the actual data.

delete btn only works on DOM. not when it refreshes

JSon Server up and running

$npm install -g json-server
$json-server --watch src/db.json
//plus relevant path 

Namely fetch requests, that are retrieval of information.

http://localhost:3000/ <----- these are the endpoint
http://localhost:3000/books/
http://localhost:3000/stores/
http://localhost:3000/stores/1

In the browser, we can test GET request. We are retreiving information.

In the postman, we can specify, HTTP verb. And we get a JSON response.

What is JSON?

Javascript Object Notation: it looks similar to JS but the one of the major difference here is that our keys are wrapped in quotes.

What is the current source of our data currently?

Current source of our data is data.js

bookStore arrays are only referencing points

What’s the current limitation?

-changes are not being persisted, it’s only being store in the

-it’s static and rigid

• it doesn’t allow us to persist the changes into data.js
• In order to change the information, we have to physically go to the data.js file and change the string

So using db.json, users will be able to persist the changes with our JS code.

document.addEventListener('DOMContentLoaded', () => {

    fetch("http://localhost:3000/stores/")
        .then((resp) => console.log(resp)) 

// Render Functions

so what is the response ?

It’s the JSON JS object notation and we can parse that data into a vanilla JS object. With JSON, we can’t interact in JS so we need to transform it into a regular object.

document.addEventListener('DOMContentLoaded', () => {

    fetch("http://localhost:3000/stores/")
        .then((resp) => resp.json())

document.addEventListener('DOMContentLoaded', () => {

    fetch("http://localhost:3000/stores/")
        .then((resp) => resp.json())
        .then((data) => console.log(data)) //another asynchronous method .then

// Render Functions

Ultimately we are getting an array of the data that we derived here

   //3 states of promise: (box)
        //statuses: pending, fulfilled, rejected
        //contents: what's returned / passed on once the promise is resolved 

    fetch("http://localhost:3000/stores/")
        .then(resp => resp.json())
        .then(data => console.log(data))

This will make more sense if I show you the promise

    const p = Promise.resolve('CONTENT')

    p.then(value => {
        console.log(`YESSSS SUCCESS! ${value}` )
    }).catch(err => {
        console.error(`NO ERROR :-( ${err})`)
    })

manually change the method to .reject

    const p = Promise.reject('CONTENT')

    p.then(value => {
        console.log(`YESSSS SUCCESS! ${value}` )
    }).catch(err => {
        console.error(`NO ERROR :-( ${err})`)
    })