Fetch API
Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.
XMLHttpRequest 가 비슷한 역할을 하지만, Fetch API가 좀더 강력하고 유연한 조작을 가능하게 합니다.
개념 및 사용방법
Fetch 에는 일반적인 오브젝트로 Request 와 Response 가 포함되어 있습니다. 이것들은 Service worker, Cache API 같이 응답 객체와 요청 객체를 다루는 API나 독자적으로 응답을 발생시키는 경우에도 사용 가능합니다.
또한 CORS 나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에 대한 정의들을 한곳에 고쳐 쓴 것입니다.
Fetch API 로 리소스를 취득하기 위해선 GlobalFetch.fetch 메서드를 불러들여야 합니다. 이 메서드는 Window 나 WorkerGlobalScope 와 같은 인터페스로부터 구현되었습니다.
fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤, fetch()는 Promise객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 Response객체가 취득됩니다. fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 Request)를 참고해주시기 바랍니다.
Response를 가져온 후에, 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에대한 처리방법이 담긴 메소드들이 담겨있습니다.
Request() 와 Response() 를 사용하는 것으로, Request와 Response를 직접 작성할 수 있습니다. 하지만 이러한 추가 옵션들은 FetchEvent.respondWith 와 같은 또다른 API를 불러 들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.
Using Fetch
Fetch API를 이용하면 Request나 Response와 같은 HTTP 파이프라인을 구성하는 요소를 조작하는 것이 가능합니다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.
Fetch 의 기본 스펙은 jQuery.ajax() 와 기본적으로 두가지가 다르다는 사실에 유념해야 합니다.
fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환해도 마찬가지 입니다. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.- 보통
fetch는 쿠키를 보내거나 받지 않습니다. 사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.
기본적인 fetch 는 누구라도 알기 쉽고 간단하게 작성할 수 있습니다.
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
네트워크에서 JSON 파일을 가져와서 콘솔에 인쇄합니다. 간단한 fetch() 사용 흐름은 인수 한개(경로)를 가져오고 응답을 포함하는 Promise(Response Object)를 반환하는 것입니다.
위 예제는 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 json() 메서드를 사용할 필요가 있습니다.
Reference
