Fetch 기본 개념

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다. 이 글에서는 Fetch API의 기본 개념을 설명합니다.

참고: 이 문서는 수시로 갱신됩니다. 더 자세한 설명이 필요하다고 생각하시는 Fetch 개념이 있으시면 MDN Web Docs 채팅에서 문의해 주세요.

훑어보기

Fetch의 핵심은 HTTP Request, Response, Headers (en-US)를 추상화하는 인터페이스와, 비동기적 리소스 요청을 시작하기 위한 fetch() 메서드입니다. HTTP의 주요 구성요소들이 JavaScript 객체로 추상화됐기 때문에, 다른 API들에서도 이 기능들을 활용하기 용이합니다.

서비스 워커 (en-US)가 Fetch를 적극 활용하는 API의 일례입니다.

Fetch는 이러한 HTTP 요청의 비동기적인 특성을 한 단계 더 발전시켜, 모든 API가 Promise에 기반합니다.

가드

가드는 Headers (en-US) 객체의 기능으로, 헤더가 사용하고 있는 장소에 따라 immutable, request, request-no-cors, response, none의 값을 사용할 수 있습니다.

새로운 Headers (en-US) 객체는 Headers() (en-US) 생성자 (en-US)로 생성되면 그 가드는 none(기본 값)으로 설정됩니다. Request 또는 Response 객체가 생성되면 관계된 Headers (en-US) 객체를 가지는데, 그 가드는 다음과 같습니다.

새로운 객체의 타입 생성자 관계된 Headers (en-US) 객체의 가드 설정
Request Request() request
no-cors의 mode (en-US)를 설정한 Request() request-no-cors
Response Response() (en-US) response
error() (en-US)메서드나 redirect() (en-US) 메서드 immutable

헤더 가드는 헤더의 콘텐츠를 변경하는 set() (en-US), delete() (en-US), append() (en-US) 메서드에 영향을 끼칩니다. 가드는 immutable의 Headers (en-US)를 수정하려고 한 경우, TypeError 를 반환합니다. 예외의 경우도 있는데 다음과 같은 상황에서는 동작합니다.