Fetch 기본 개념

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

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

훑어보기

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

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

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

가드

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

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

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

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