fetch() API

HTTP를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로 AJAX를 쓴다.

AJAX : 비동기 자바스크립트와 XML

웹페이지를 동적으로 서버에게 데이터를 주고받을 수 있는 기술.

대표적인 예 : XHR이라고 하는 object. XMLHttpRequest 객체.

브라우저 API에서 제공하는 object 중 하나. 간단하게 서버에게 데이터를 요청하고 받아올 수 있다. 

최근 XHR 대신 브라우저 API에 추가된 fetch API를 이용하면 간편하게 데이터를 주고받을 수 있다. 

 

XML : HTML과 같은 마크업 언어 중 하나. 태그들을 이용해서 나타낸다. 

HTML과 마찬가지로 데이터를 표현할 수 있는 방법.

하지만, 불필요한 태그들이 너무 많이 들어가서 파일의 사이즈도 커질 뿐만 아니라 가독성도 좋지 않아 요즘 XML은 많이 쓰여지지 않는다.

XML 대신 JSON 많이 사용.

 

비동기 요청의 가장 대표적인 사례 : 네트워크 요청

네트워크를 통해 이뤄지는 요청은 형태가 다양하다. 그 중, URL로 요청하는 경우가 가장 흔하다.

URL로 요청하는 걸 가능하게 해주는 API : fetch API

 

포털 사이트에서 '최신 뉴스' & '날씨/미세먼지 정보'는 동적으로 데이터를 받아와야한다.

이럴 때, 해당 정보만 업데이트 하기 위해 요청 API이용. 그 중, 대표적인 fetch API 이용. 

fetch API : 특정 URL로부터 정보를 받아오는 역할.

그 과정이 비동기로 이루어지기 때문에 경우에 따라 다소 시간이 걸릴 수 있다. 

이렇게 시간이 소요되는 작업을 요구할 경우, blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될 때까지 로딩창을 대신 띄우는 경우도 있다. 

 

[ fetch API 사용법 ]

let url = "https://v1.nocodeapi.com/codestates.." 

fetch(url)
  .then((response) => response.json())
  //response : Response라는 내장클래스 형태.
  //json()메소드 : 서버에서 보내주는 body(json형식)를 parsing하여 다음 Promise로 전달
  .then((json) => console.log(json)) //콘솔에 json 출력
  .catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄운다.

그러면 fetch(url)도 Promise 형태, fetch(url).then()도 Promise형태..?

  
  .then 메소드는 하나의 callback을 parameter로 받고 그 function의 return 값을 Promise의 결과값으로 보유하고 있는 Promise를 반환합니다.
따라서 Promise.then() 도 Promise 형태입니다.
Promise를 다시 설명을 하자면,
Promise에서 만약 오류가 아니라면, resolve()를 실행하고 그 반대라면 reject()를 실행하겠죠
resolve(result)라고 하면, result라는 값이 Promise의 .then()에 파라미터로 넘겨집니다.
그럼 그 .then()의 return 값은 어디로 넘겨지는가. 그건 다음 .then()에 넘어갑니다.

따라서 첫번째 .then()의 내부에 주어지는 메소드는 비유해서 말하자면 두번째 .then()의 resolve()라고 생각하면 됩니다.