반응형
Fetch API
Fetch API는 JavaScript에서 네트워크 요청을 보내고 데이터를 가져오기 위해 사용하는 표준화된 인터페이스입니다. 주로 HTTP 요청을 보내 서버와 통신하거나 데이터를 가져오는 작업에 사용됩니다. 이전에 사용되던 XMLHttpRequest에 비해 더 직관적이고 간결한 문법을 제공합니다.
특징
- Promise 기반:
- fetch는 Promise를 반환하므로, 비동기 작업을 간편하게 처리할 수 있습니다.
- async/await 문법과 함께 사용하기에 적합합니다.
- 모듈화된 설계:
- 요청과 응답을 Request와 Response 객체로 캡슐화하여 작업을 명확히 분리합니다.
- 확장 가능성:
- 다양한 옵션을 통해 HTTP 메서드, 헤더, 본문 등을 설정할 수 있습니다.
- 기본 JSON 처리:
- 응답 데이터를 JSON으로 쉽게 변환할 수 있는 .json() 메서드를 제공합니다.
기본 사용법
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // JSON 데이터를 파싱
})
.then(data => {
console.log(data); // 가져온 데이터 처리
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});옵션 설정
fetch 메서드는 두 번째 매개변수로 요청 옵션을 받습니다. 예:
fetch('https://api.example.com/data', {
method: 'POST', // HTTP 메서드
headers: {
'Content-Type': 'application/json' // 요청 헤더 설정
},
body: JSON.stringify({ key: 'value' }) // 요청 본문
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));중요한 점
- CORS:
- fetch를 사용할 때 CORS(Cross-Origin Resource Sharing) 정책이 적용됩니다.
- 서버에서 적절한 헤더를 설정하지 않으면 요청이 차단될 수 있습니다.
- 오류 처리:
- HTTP 오류 상태 코드(예: 404, 500)는 Promise를 거부하지 않습니다. 따라서 response.ok로 상태를 확인해야 합니다.
- 비동기 처리:
- Promise 또는 async/await 문법을 사용하여 코드의 가독성을 높이고 비동기 흐름을 관리할 수 있습니다.
Example: async/await 사용
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Fetch error:', error);
}
}
fetchData();<!DOCTYPE html>
<head>
<title>fetch 예시</title>
</head>
<body>
<div id="content"></div>
<script>
const API_URL = 'https://animal-api-two.vercel.app/';
const $content = document.querySelector('#content');
let template = [];
const request = async () => {
let res = await fetch(API_URL);
try {
if (res) {
let data = await res.json();
data.photos.forEach((elm) => {
template += `<img src="${elm.url}"></img>`;
});
$content.innerHTML = template;
}
} catch (error) {
console.log(error);
}
};
request();
</script>
</body>
</html>대체 API와의 비교
- XMLHttpRequest:
- 복잡하고 콜백 지옥(callback hell) 문제를 유발할 수 있음.
- fetch는 Promise 기반으로 설계되어 더 깔끔한 코드를 작성할 수 있음.
- Axios:
- 더 많은 기능을 제공하는 서드파티 라이브러리.
- fetch보다 간결한 문법과 향상된 오류 처리 제공.
Fetch는 브라우저에서 기본적으로 지원되기 때문에 외부 라이브러리를 설치할 필요가 없지만, Axios와 같은 라이브러리가 더 풍부한 기능을 제공할 때도 있습니다.
반응형
'프론트엔드 > javascript' 카테고리의 다른 글
| Node.js vs Express.js (0) | 2025.01.05 |
|---|---|
| History API (0) | 2025.01.04 |
| require (2) | 2025.01.03 |
| PerformanceAPI (0) | 2024.12.31 |
| Querystring (0) | 2024.12.29 |
