fetch는 도대체 어떻게 사용하는 걸까?

오늘은 내가 HA를 치르면서 내가 안다고 생각했지만, 그렇지 못했던 것들에 대해 정리해 볼 생각이다. 

그 첫번째로 fetch를 들겠다. 

What is Fetch and how to use it?

Mdn에 따르면, fetch api는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있으며, XML HttpRequest와 같은 비슷한 API가 존재하지만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능하다. 

나는 도대체 뭔말인지 모르겠다. 아래의 예를 보며 자세히 알아보자.

 

fetch를 사용하는 구조는 아래와 같다. 

fetch의 기본 사용구조

그래. 사용하는 방법은 대강 알겠다. 

fetch에다가 접속할 url을 넣고, 

.then을 통해 콜백함수를 호출하고, 받아온 response에다가 json()메소드를 적용시키는것. 

(** 여기에서 주의 할점!
       여기에 나오는 json()은 fetch의 메소드 일뿐, JSON.parse나, JSON.stringify와 다르다. **  )

json() 메소드는 도대체 어떤 역할을 하는 걸까?

json()메소드는 response 스트림을 가져와 스트림이 완료가 될때까지 읽으며,  
body text를 JSON으로 바꾸는 결과로 해결되는 Promise 객체를 반환한다. 

이해가 될듯 하면서, 명확히 이해가 되지 않아, 직접 다 콘솔에 찍어보기로 했다. 

실제로 접속하면 아래와 같은 보기만 해도 미칠것같은,

JSON 형식의 객체로 이루어진 url을 fetch에 넣어보기로 했다. 

우선 도대체 response가 어떻게 나오는지 찍어보기로 했다. 

그 결과는 아래와 같다. 

우리가 원하는 방식으로 결과가 나오지 않으며, body에는 ReadableStream이라고만 되어 있다.
즉 아직 읽지 않았다는 뜻! 

이때 우리가 아까 잠시 봤던, 'response 스트림을 가져와 끝까지 읽는다고 했던'  json()메소드를 써보자. 

아래의 결과는 console.log(resp.json())을 한 결과이다. 

console.log(resp.json())의 결과

아하! resp.json()을 통해 json메소드를 썼더니,
아까 정의대로 promise객체가 리턴이 되었다. 다만, 아직 promise객체 상태이므로, 

우리가 원하는 상태로 풀어주기 위해서는 

.then을 한번더 써줄 필요가 있다. 

 

그 결과 data를 콘솔에 찍어보니, 우리가 원했던 값이 promise객체값이 아닌 자바스크립트의 객체값으로 나타나는 것을 볼 수 있다. 
자, 우리는 이제  fetch를 어떻게 사용하는지에 대해 알아보았다. 
결론적으로! 

How to use Fetch?

fetch(url)
.then(resp =>  resp.json())
.then(data => data)

방식으로 우리가 원하는 일반적인 js객체형식의 data를 받아올 수 있다. 

그럼 이제 이렇게 fetch를 사용하여 읽어온 걸
실질적으로 어떻게 이용할 수 있는지에 대해 다음 포스트에서 알아보도록 하자.