Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch()
메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다.
Fetch에는 fetch()
,Body
, Headers
, Request
, Response
인터페이스가 존재한다.
fetch()는 2개의 매개변수를 받는데 첫번째는 URL이고 두번째는 Option이다. URL은 필수 매개변수이다. 그리고 ajax 통신이 성공하든 실패하든 Response로 분해할 수 있는 Promise를 리턴한다.
fetch(url, [options])
- url : 접근하고자 하는 url
- options : 선택 매개변수(method나 header 지정가능)
- method : 사용할 메소드 선택 (GET/POST/PUT/DELETE)
- headers : 헤더에 전달할 값 ({'content-Type' : 'application/json'})
- body : 바디에 전달할 값 (JSON.stringify(data))
- mode : 'cors'등의 값을 설정 (cors, no-cors, same-origin)
- credentials : 자격증명을 위한 옵션 설정(include, same-origin, omit)
(default : same-origin)- cache : 캐쉬 사용여부 (no-cache, reload, forc-cache, only-if-cached)
응답은 통상 2단계를 거쳐 진행된다
먼저 서버에서 응답 헤더를 받으면 fetch 호출 시 반환받은 Promise 객체가 fulfilled 상태가 되고 이때 Response 객체가 전달된다. Response의 ok 속성으로 작업의 성공 여부를 알게 되는데 만약 상태코드가 2XX 인 경우는 true이고 나머지는 false이다. 하지만 이 상태는 아직 본문(body)을 받지 않은 상태이다.
전달받은 Response 역시 Promise 인데 이 객체를 통해서 body 즉 실제 데이터를 받을 수 있다. 이때 사용되는 함수로는 body의 타입에 따라서 response.json(), response.text(), response.blob() 등이 있다.
const url = "https://jsonplaceholder.typicode.com/posts/1";
const byFetch = () => {
fetch(url)
// 응답 처리 1단계: 상태만 파악 가능
.then((response) => {
if (!response.ok) {
throw new Error(`오류 발생: ${response.status}`);
}
return response.json(); // 응답을 native js 객체로 변환
})
// 응답 처리 2단계: 실제 body 데이터 활용
.then((data) => console.log(data))
.catch((error) => console.error("fetch fail", error));
};
const byAsync = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`오류 발생: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("fetch fail", error);
}
};