1. fetch API란?
http를 이용해 server에게 데이터를 비동기적으로 요청해서 받아올 수 있는 방법
MDN 정의에 따르면?
- Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능
- fetch()메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있음
- 이전에 이러한 기능을 XMLHttpRequest에서 제공하고 있었지만 Fetch는 이러한 API의 대체제로 Service Workers (en-US)같은 기술로 간단히 이용하는 것이 가능
- CORS나 HTTP 확장 같은 HTTP에 관련한 개념을 모아 정의하고 있음
2. fetch API 사용법
- fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받음
- Promise 타입의 객체를 반환
- 반환된 객체는 API 호출이 성공했을 경우에는 응답(response) 객체를 resolve, 실패했을 경우에는 예외(error) 객체를 reject
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등 설정 가능응답(response) 객체로부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있음- 참고 : fetch() 함수는 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 함
