Fetch
-
기존에 사용하던
XMLHttpRequest를 대체하는 비동기 통신 요청 API -
Promise기반으로 동작하기 때문에promise chaning을 통해 데이터 조작이 가능하다. -
두 번째 인자로 요청 옵션을 설정할 수 있다.
const fetchResponsePromise = fetch(resource [, init])
init
객체 형식으로 전달되며, 사용 가능한 옵션은 아래와 같다.
-
method: 요청 방법(
GET, POST...)을 설정한다. 기본값은GET이다. -
mode: 요청에 사용할 모드(
cors, no-cors, same-origin)를 의미한다. 기본값은same-origin이다. -
cache: 캐시와 어떻게 상호작용 할 지 정하는 설정. 기본값은
default이다. -
credentials: cross-origin 요청에서, user agent가 다른 도메인으로부터 cookie를 전달할지 정하는 설정. 기본값은
same-origin이다. -
headers: 요청에 사용될 각종 정보를 담고있는 항목. 문자열로 이루어진
key-value쌍으로 되어있다. -
redirect: redirect를 어떻게 처리할지 정하는 설정. 기본값은
follow이다. -
referrer: 요청이 어디서 전달되었는지 도메인을 알리는 속성. 기본값은
client이다. -
body:
POST요청에 사용할 데이터를 실어 보내는 속성.
주의
-
fetch() 메서드의 기본 응답은 Response 객체이다.
-
그래서
body에 담긴 데이터를 활용하기 위해서는 객체에 내장되어있는json()혹은text()같은 메서드를 이용해서 다시Promise를 반환해서 사용한다. -
HTTP error가 발생하더라도 reject 되지 않고, 네트워크 에러나 요청이 완료되지 못 한 경우에만 reject 된다.
-
에러가 생겨도
then으로 떨어지기 때문에, response의 status code나 ok를 체크해야 한다. -
Response.ok는 응답 코드가 200~299 일 경우 true가 되기 때문에 유의하자.
참고 자료
Using Fetch - Web API | MDN
fetch() - Web APIs | MDN
Headers - Web APIs | MDN
