Fetch API란?
Fetch API는 웹 브라우저에서 제공하는 통신(API) 인터페이스입니다. 네트워크 요청을 보내고 응답을 받는 기능을 제공하며, XMLHttpRequest 객체 대체 목적으로 도입되었습니다.
Fetch 함수
Fetch API는 fetch() 함수를 이용하여 사용됩니다. fetch 함수는 기본적으로 다음과 같은 형태로 사용합니다.
javascript
fetch(url)
.then(response => response.json())
.then(data => {
// 데이터 처리 로직
})
.catch(error => {
// 에러 처리 로직
});
fetch 함수는 URL을 첫 번째 인자로 받고, 네트워크 요청을 보내어 응답을 받습니다.
응답 처리
fetch 함수를 호출한 후, then() 메소드를 체인으로 연결하여 응답 데이터를 처리합니다. 응답 데이터는 json(), text(), blob() 등의 메소드를 통해 다양한 형태로 변환할 수 있습니다.
javascript
fetch(url)
.then(response => response.json()) // JSON 형태로 변환
.then(data => {
// 데이터 처리 로직
});
요청 설정
fetch 함수의 두 번째 인자로 객체를 전달하여 요청을 세부적으로 설정할 수 있습니다.
javascript
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
// 데이터 처리 로직
});
에러 처리
fetch 함수의 요청이 실패했을 때, catch() 메소드를 사용하여 에러를 처리할 수 있습니다.
javascript
fetch(url)
.then(response => response.json())
.then(data => {
// 데이터 처리 로직
})
.catch(error => {
// 에러 처리 로직
});
Fetch API의 장점
- 간결하고 명확한 API: Promise 기반이기 때문에 비동기 코드를 깔끔하게 작성할 수 있습니다.
- 강력한 응답 처리: 다양한 응답 형식을 처리하기 위해 내장된 메소드를 사용할 수 있습니다.
- 요청 설정의 유연함: 객체를 이용하여 다양한 설정을 할 수 있습니다.
- 기존 XHR(XMLHttpRequest) 대신 사용 가능: 더욱 직관적이고 사용하기 쉬운 API로 XHR을 대체할 수 있습니다.
정리하자면, Fetch API는 네트워크 요청을 보내고 응답을 받는 기능을 제공하는 API입니다. 이를 통해 간결한 코드로 통신을 처리할 수 있으며, 다양한 설정과 응답 형식 처리 기능을 제공합니다.