📚 Fetch 함수의 기본 원리와 응답 처리 방법
자바스크립트에서 웹 API를 호출할 때 fetch함수를 자주 사용한다. fetch 함수는 웹 API를 호출 시, 웹 리소스를 불러오는 간편하고 강력한 방법을 제공하기 때문이다.
이번 글을 통해 fetch 함수를 사용하여 간단한 요청을 보내고 응답을 처리하는 방법을 살펴보고, 더 나아가 실행 원리와 응답 처리 방법에 대해 자세히 알아보자.
Fetch 함수
📌 Fetch 함수의 기본 원리
Fetch함수는 서버로 요청(Request)를 보내고, 응답(Response)를 받는 함수이다. 이 때, fetch 함수는 Promise 객체를 반환하며, Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과의 값을 나타낸다.
간단히 말해서, fetch 함수는 서버로부터의 응답(Response)을 기다리는 동안 다른 코드의 실행을 차단하지 않고, 응답이 도착하면 이를 처리할 수 있도록 해주는 것이다.
아래 코드는 Fetch함수의 기본적인 사용에 대한 예제이다. 여기서 fetch 함수는 파라미터로 넘어온 URL로 요청를 보내고, 응답을 받아오는 Promise 객체를 반환한다. 그리고 .then() 메소드를 사용하여 응답이 왔을 때 실행할 콜백 함수를 등록하게 된다.
fetch('https://www.google.com')
.then(response => response.text())
.then(result => console.log(result));
cf1> Request vs Response
- Request: 웹 브라우저가 서버로 보내는 '요청'
- Response: 서버가 다시 보내지는 '응답'
cf2> 콜백(Callback) 함수
- 나중에 어떤 조건이 만족되었을 때 실행되는 함수
cf3> then 메소드
- 콜백을 등록해주는 메소드
cf> Promise 객체와 then 메소드에 관해서는 위 글을 통해 더욱 자세히 확인 가능하다: Promise 객체를 통해 콜백 지옥에서 벗어나기
📌 Fetch 사용시 주의사항
-
에러 처리: 네트워크 요청은 실패할 수 있으므로, fetch에서 발생할 수 있는 예외를 적절히 처리해야 한다.
-
의존성 배열 관리: 의존성 배열을 적절히 관리하여, 원하는 시점에만 데이터를 불러오도록 해야 한다.
-
로딩 상태 관리: 데이터를 불러오는 동안 사용자에게 로딩 상태를 알려주는 것이 좋다.
응답 처리
📌 응답 객체의 처리
fetch 함수를 통해 받아온 응답(response)는 단순한 텍스트가 아니라 HTTP 응답을 나타내는 Response 객체이다. 이 객체에는 상태 코드, 상태 메시지, 헤더 등과 같은 다양한 정보가 포함되어 있다.
📌 앞선 예제에서 왜 response.text()가 필요한가?
일반적으로 우리가 원하는 것은 응답의 본문 즉, 실제 데이터이다. response.text() 메소드를 호출하면 응답 본문을 텍스트로 변환해주는 Promise 객체를 반환한다. 이렇게 변환된 텍스트는 다음 .then()에서 처리되게 되는 것이다.
아래 코드처럼 작성하면, response 객체 자체가 콘솔에 출력됩니다. 이 때, 여기서 실제 응답 데이터가 아니라 HTTP 응답의 세부 사항을 확인 가능하다.
fetch('https://www.google.com')
.then(response => { console.log(response); });Outro
이번 글을 통해 Fetch 함수의 기본 원리와 응답 처리 방법에 대해 학습해보았다.
fetch 함수에 대해 학습하며 Promise 객체, 비동기 처리에 관한 언급을 하였는데, 이에 관해서는 추후 글을 통해 더욱 자세히 알아보고자 한다.
- 자바스크립트에서 비동기 실행이란? (vs 동기 실행)
- Promise 객체를 통해 콜백 지옥에서 벗어나기
