fetch API

네트워크 요청 : 비동기 요청의 가장 대표적인 사례 - 다양한 네트워크 요청 중, URL로 요청하는 경우가 가장 흔함

fetch API : 특정 URL로부터 정보를 받아오는 역할
별도의 라이브러리 대신 최신 브라우저에서 모두 내장되어있는 함수이며 사용이 쉽고 Promise 값을 반환
다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등등 다양한 일을 페이지 새로고침 없이 수행한다.

시시각각 변하는 정보
ex) 최신 뉴스나 날씨/미세먼지 정보 -> 웹사이트에서는 해당 정보만 업데이트하기 위해, 자바스크립트, 그 중에서도 fetch API를 이용해 해당 정보를 원격 URL로부터 불러옴.( 원격 URL로부터 정보를 받아와서 특정 DOM 엘리먼트를 업데이트 )

fetch API는 Promise의 형식

let url = 'https://~~.com/~~';   // url 변수로 담은 경우
fetch(url)
  .then(response => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달
  //fetch() API는 Promise를 반환 ->첫번째또는 두번째 인자에서 작업을 거친 이후 
//Promise가 내장 클래스 Response의 인스턴스와 함께 이행(fulfilled)상태가 됨
  .then(json => console.log(json)) // 콘솔에 json을 출력합니다
  .catch(error => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다