fetch

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있습니다.

네트워크의 요청은 다음과 같이 이루어진다.

• 주문전송
• 사용자 정보 읽기
• 서버에서 최신 변경분 가져오기
• 등등

이 모든 것들은 페이지 새로 고침없이도 가능합니다.

이 때, 사용하는 것이 Ajax인데 물론 Ajax만 이 기능을 담당하는 것이 아니라 서버에 네트워크 요청을 보내고 정보를 받아올 수 있는 방법은 다양합니다. 그중 fetch()를 알아보고자 합니다.

fetch()는 구식 브라우저에선 지원하진 않지만 대부분의 모던 브라우저가 지원합니다.

fetch() 문법

let promise = fetch(url, [options])

• url : 접근하고자 하는 URL
• options : 선택 매개변수, method나 header 등을 지정할 수 있다.
  options에서 아무것도 남가지 않으면 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드 됩니다.

fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환됩니다. 반환되는 프라미스는 fetch()를 호출하는 코드에서 사용됩니다.

응답은 대개 두 단계를 거쳐 진행됩니다.

먼저, 서버에서 응답 헤더를 받자마자 fetch 호출 시 반환받은 promise가 내장 클래스 Response의 인스턴스와 함께 이행 상태가 됩니다. 이 단계는 아직 본문(body)이 도착하기 전이지만, 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 아닌지를 확인할 수 있습니다. 네트워크 문제나 존재하지 않는 사이트에 접속하려는 경우같이 HTTP 요청을 보낼 수 없는 상태에선 프라미스는 거부상태가 됩니다.

HTTP 상태는 응답 프로퍼티를 사용해 확인할 수 있습니다.

• status – HTTP 상태 코드(예: 200)
• ok – 불린 값. HTTP 상태 코드가 200과 299 사이일 경우 true