fetch 라이브러리 - 웹 데이터 받아오기 (프로미스 형식)

fetch를 이용한 네트워크 요청

fetch API는 특정 URL로부터 정보를 받아오는 역할을 합니다.
이 과정은 비동기로 이뤄지기 때문에 경우에 따라 시간이 걸리는 작업이 요구될 경우, 그 정보가 표시될 때까지 로딩창을 띄우는 경우도 많이 있다.

기존 JSON 구조, JSON 함수

fetch API 사용법

Promise의 형식으로 이루어져 있다.

• fetch() 메소드는 Promise 객체(Response) 반환합니다.

fetch(url)
  .then((response) => response.json())  // response 응답받은 데이터를 json형식으로 잠시 변환
  .then((dta) => console.log(data))  // json()의 결과값 data는 json이 아니다! data 그 자체(기존형식)가 전달된 것
  .catch((error) => console.log(error)); 

• fetch() 과정

1. url에 데이터을 보내달라고 요청
2. 응답(response)받은 프로미스 객체 (url내의 데이터)를
3. json() 메소드로 JSON 형태로 변환시켜서 다음 Promise로 전달한다.
4. json() 메소드의 결과값은? JSON 형식이 아니다! url 안의 데이터 객체형식 그 데이터 자체

fetch는 자체적으로 json() 메소드가 있다 !

json 메소드는 JSON.stringify()와 다르다!
실제로 JSON이 아니라, 잠시 원하는 데이터를 받아서 사용하기 위해 응답받은 데이터를 JOSN형식으로 변환했을 뿐이다. (이때 받은 데이터는 원래 형식의 데이터이지 JSON 형식의 데이터가 아니다.)

fetch()
응답.json()