기존에 사용하던 XMLHttpRequest
를 대체하는 비동기 통신 요청 API
Promise
기반으로 동작하기 때문에 promise chaning
을 통해 데이터 조작이 가능하다.
두 번째 인자로 요청 옵션을 설정할 수 있다.
const fetchResponsePromise = fetch(resource [, 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