JavaScript fetch() API – 비동기 데이터 가져오기 완벽 가이드

 

 

안녕하세요 😊
웹 개발에서 서버와 데이터를 주고받는 일은 아주 흔합니다.
예전에는 XMLHttpRequest를 사용했지만,
이제는 더 간단하고 직관적인 fetch() API가 표준으로 자리 잡았습니다.

이번 글에서는 fetch() API의 기본 사용법부터
에러 처리, JSON 변환, POST 요청, async/await 활용까지 정리해보겠습니다.

---

📍 1. 기본 사용법

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json()) // JSON 변환
  .then(data => console.log(data))
  .catch(error => console.error("에러 발생:", error));

 

📌 특징

• 첫 번째 인자는 URL
• 기본 메서드는 GET
• response.json() → 응답을 JSON 객체로 변환 (비동기)

---

📍 2. POST 요청 보내기

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Hello",
    body: "Fetch API Example",
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => console.log(data));

 

📌 주의: body는 반드시 문자열(JSON 형식)로 변환해야 함

---

📍 3. async/await로 더 깔끔하게

async function getPost() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!res.ok) throw new Error("네트워크 오류");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("에러:", err);
  }
}
getPost();

• 가독성 좋은 비동기 처리 방식
• res.ok로 HTTP 상태 코드 체크 가능

---

📍 4. 요청 옵션 정리

옵션	설명
method	HTTP 메서드 (GET, POST, PUT, DELETE 등)
headers	요청 헤더 설정
body	요청 본문 (POST/PUT 등에서 사용)
mode	CORS 정책 설정 (cors, no-cors, same-origin)
credentials	쿠키 포함 여부 (same-origin, include, omit)

 

---

📍 5. 실무 팁

• API 호출이 많은 경우 에러 처리 로직 공통화
• AbortController로 요청 취소 가능

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 요청 취소

• 응답 캐싱이나 중복 요청 방지 로직 구현 시 유용

---

✅ 마무리

fetch() API는 간단하면서도 강력한 네트워크 요청 도구입니다.
GET, POST뿐만 아니라 파일 업로드, 요청 취소 등 다양한 기능을 지원하니
프로젝트에 적극 활용해보세요. 🚀