IM15일차 초보개발자 TIL(fetch)

클라이언트에 관련된 과제를 진행하였다.

 

fetch를 이용하여 data를 받아와 client에 구현될 수 있도록 하는 작업이었다.

 

fetch API 는 리소스 취득을 위한 인터페이스이다.

 

ES6의 사용이 많아짐에 따라 fetch API의 사용도 증가하는 추세이다.

fetch(URL)
  .then(res => res.json())
  .catch(err => console.log(err))

fetch함수를 이용하여 URL을 받아고

 

.then을 이용해 callback함수를 실행한다.

 

.catch를 사용하여 에러가 발생하였을때 핸들링 해주면 된다.

 

다만 fetch함수 만으로 data를 바로 사용할 수 없다.

 

res에는 body가 담겨져 나오는데 이거 자체는 스트림이고 완전히 data를 가져오는 것이 아니다.

 

그렇기 때문에 위의 내용과 같이 응답 객체에 대해 json()을 처리해 주어야지만 data를 사용할 수 있다.

 

이 결과로 나오는 것이 promise이다.

 

 

---

fetch(URL{
  method: 'POST',
  body: JSON.stringify({ data : 'newData' })
  })
  .then(res)
  .catch(err => console.log(err))

메소드에는 GET,POST,PUT, DELETE등이 사용가능하며, 위와 같이 method에 POST를 넣어 post할 수 있다.

 

그리고 body값을 전송하기 위해서는 json()을 한 것과 같은  의미로  여기서는 JSON.stringlify를 하여  똑같이 문자열로 전환해준다.

 

JSON.stringify와 반대로 문자열을 객체화 하는 함수는 다음과 같다.

 

JSON.parse()

 

이를 이용하여 body를 서버로 요청하거나 응답받을때 사용하여 data를 주고 받을 수 있다.

 

 

출처: https://developer.mozilla.org/ko/docs/Web/API/Body/json