1219 / html 메서드 / fetch

fetch / json / ajax / proimse / async / await

---

fetch

                      요청(request)

웹브라우저 ㅡㅡㅡㅡㅡㅡㅡㅡ>서버

                   <ㅡㅡㅡㅡㅡㅡㅡㅡ

                          응답(response)

fetch('https://www.google.com') // 파라미터로 넘어온 url로 리퀘스트를 보냄 -> 서버로부터 응답이 오면 받음
.then((response) => response.text())// 서버에 리스폰스가 오면 함수 실행 -> 하나의 객체가 되어서 response 라는 파라미터로 넘어옴
.then((result) => {console.log(result);});
//then 메소드는 fetch함수가 리턴하는 어떤 객체의 메소드 -> 
//promise 객체의 then 메소드는 콜백을 등록하는 메소드
//이전 콜백의 리턴값을 다음 콜백이 넘겨받을 수 있음

 

fetch 함수는 promise 객체를 리턴

-> promise 객체의 then 메소드로 리스폰스가 왔을 때 실행할 콜백함수를 등록 할 수 있다

-> 등록된 콜백들은 then 메소드로 등록한 순서대로 실행되고 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사

response 파라미터로는 response 실제 내용이 넘어오는게 아니라 response 에 관한 정보들과 내용을 가지는 객체가 넘어와서 바로 console.log로 나올 수 없다.

따라서 response객체의 text 메소드를 호출해야 볼 수 있다 .

 

 

 

---

json 

자바스크립트 언어의 문법을 빌려서 만들어진 데이터포멧

1. 각 프로퍼티의 이름을 큰 따옴표로 감싸줘야한다.

2. 값이 문자열인 경우 큰 따옴표를 사용해야 한다.

 

{
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    }

3. 프로퍼티의 값으로 사용할 수 있는 underfined, nan, infinity 등을 사용할 수 없다. 

4. 코드가 아니라 데이터 포멧이기 때문에 주석을 사용할 수 없다. 

 

스트링 타입의 제이슨 데이터는 자바스크립트 객체로 변환할 수 있다. 

fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.text())
.then((result) => {const users = JSON.parse(result)});
//{const users = JSON.parse(result)}) 이 제이슨은 제이슨 데이터를 다루기 위해 사용되는 자바스크립트의 기본 객체
//객체의 이름과 데이터 포맷의 이름이 같으므로 주의 
//json 객체에 parse메소드를 사용하면 스트링 타입의 제이슨 데이터를 자바스크립트 객체로 변환 가능

 

response 객체의 text 메소드 대신 json 메소드를 호출하면 리스폰스 내용이 json데이터에 해당하는 경우 바로 역직렬화까지 수행해준다. 

json 메소드를 사용하면 두 번재 콜백의 result 파라미터로는 역직렬화 결과로 생성된 자바스크립트 객체가 넘어간다. 

//response 내용이 json데이터에 해당하지 않을 경우에는 에러가 발생

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((result) => { const users = result; });

 

 

 

 

parse// stringulfy

 

---

Request 종류 

1. 데이터 조회 - GET Request / 데이터 처리 read

2. 데이터 추가 - POST Request / 데이터 처리 create

3. 데이터 수정 - PUT Request / 데이터 처리 update

4. 데이터 삭제 - DELETE Request / 데이터 처리 delete

 

리퀘스트는 head 와 body로 나뉨

head - request 대한 부가정보 -메소드

body - 실제 데이터를 담는 부분

 

 GET Request / DELETE Request 바디부분을 볼 수 없음

 POST Request / PUT Request 가능

POST Request로 데이터 추가;

put로 수정 ->  객체 / 메소드/ 바디 데이터  수정

DELETE Request

DELETE Request와 GET Request는 BODY가 필요 없으니까 적지 않아도 된다.

 

---

Status Code