[JS] fetch에 대해 알아보자

Ajax는 외부에 있는 웹 서버의 정보를 가져오는 방법을 말한다

그 중 하나의 방법에 fetch 함수가 있다

 

fetch 함수를 이용하면

서버에게 데이터를 요청하고 응답하는 과정이 이루어진다

 

예를 들어,

크롬 브라우저를 실행시켜 url을 입력하는 창에 'https://www.naver.com/'을 입력했다고 하자

브라우저의 요청을 받은 웹 서버는 'https://www.naver.com/'에 대한 데이터를 찾은 뒤에 사용자에게 건네준다

 

 

fetch 구조

구조

기본적인 리소스를 취득하기 위한 fetch의 구조는 다음과 같다

fetch("url")
.then(response => response.json())
.then(data => console.log(data))

순서 1) fetch : '첫번째 인자로 전달된 데이터를 서버에게 요청할게'

순서 2) then : 'fetch야, 서버 응답이 끝나면 콜백 함수를 실행시켜줘'

 

fetch 함수는 Promise 객체를 반환한다

그렇기 때문에 .then을 사용할 수 있는 것이다

 

response 객체는 json() 메서드를 제공한다

이 메서드를 호출하면 response 객체로부터 JSON 형태의 데이터를 Javascript 객체로 변환할 수 있다

이 과정을 이해하기 어렵다면 'fetch 함수는 이런 과정으로 진행되는구나~'하고 넘어가도 된다

 

async / await를 이용하면 조금 더 직관적으로 코드를 짤 수 있다

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json();
  console.log(jsonData);
}

 

 

사용하는 이유

fetch는 간단한 문법으로 GET, POST, PUT, DELETE 등의 HTTP 요청을 보낼 수 있다