Fetch API

Fetch API란?

Fetch API는 비동기 HTTP 요청을 수행하기 위한 최신 웹 표준 JavaScript API입니다. 서버와 통신하여 데이터를 가져오거나 전송하는 작업을 간단하게 처리할 수 있으며, 기존의 XMLHttpRequest를 대체하는 기능을 제공합니다.

---

Fetch API의 주요 특징

1. Promise 기반:

   • Fetch는 Promise를 사용하므로, 비동기 작업을 처리하는 코드가 더 간결하고 읽기 쉬워졌습니다.
   • then()과 catch()를 사용하거나 async/await으로 코드를 작성할 수 있습니다.

2. 표준화된 API:

   • Fetch API는 최신 브라우저 환경에서 표준화된 방법으로 HTTP 요청을 처리합니다.

3. 응답 및 요청 스트림 처리:

   • Fetch는 응답 데이터를 스트림 방식으로 처리하여 대규모 데이터도 효율적으로 다룰 수 있습니다.

4. JSON 및 다른 형식 처리:

   • Fetch는 기본적으로 JSON 데이터를 처리할 수 있으며, 텍스트, Blob, FormData 등 다양한 응답 형식을 지원합니다.

5. CORS 지원:

   • Fetch는 CORS(Cross-Origin Resource Sharing)를 기본적으로 지원하여, 다른 도메인 간의 요청도 적절히 처리합니다.

---

Fetch API의 기본 사용법

GET 요청

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // JSON 데이터로 변환
  })
  .then((data) => {
    console.log(data); // 응답 데이터 출력
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

POST 요청

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'New Post',
    body: 'This is a new post.',
    userId: 1,
  }),
})
  .then((response) => response.json()) // JSON 변환
  .then((data) => {
    console.log('Created:', data);
  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });

---

Fetch API와 JSON 처리

Fetch는 기본적으로 응답 데이터를 처리하는 메서드를 제공하며, JSON 데이터를 다룰 때 자주 사용됩니다.

JSON 처리 예시

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json()) // JSON 데이터를 반환
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

텍스트 데이터 처리

fetch('/example.txt')
  .then((response) => response.text()) // 텍스트 데이터를 반환
  .then((text) => console.log(text))
  .catch((error) => console.error(error));

---

Fetch API의 요청 옵션

fetch() 함수는 요청 메서드와 헤더, 바디 등의 옵션을 설정할 수 있습니다.

fetch(url, {
  method: 'POST', // HTTP 메서드
  headers: {
    'Content-Type': 'application/json', // 요청 헤더
  },
  body: JSON.stringify(data), // 요청 본문
});

요청 옵션 설명

옵션	설명
method	HTTP 메서드(GET, POST, PUT, DELETE 등).
headers	요청 헤더 정보(예: Content-Type).
body	요청 본문(POST, PUT 요청에 사용).
mode	CORS 정책 설정(예: cors, no-cors).
credentials	쿠키 포함 여부(예: include, same-origin).
cache	캐싱 정책 설정(예: default, no-cache).

---

Async/Await과 Fetch API

async/await를 사용하면 Fetch API를 더 간결하게 사용할 수 있습니다.

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json(); // JSON 변환
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
};

fetchData();

---

에러 처리

Fetch는 HTTP 오류 상태 코드(예: 404, 500)를 자동으로 처리하지 않으므로, 명시적으로 에러를 확인해야 합니다.

에러 확인 및 처리

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .catch((error) => console.error('Error:', error));

---

Fetch API의 한계와 주의사항

1. HTTP 오류 자동 처리 없음:

   • Fetch는 HTTP 상태 코드(404, 500 등)를 에러로 간주하지 않습니다. 응답 객체의 ok 속성을 사용해 에러를 확인해야 합니다.

2. 요청 취소:

   • Fetch는 기본적으로 요청 취소 기능을 제공하지 않습니다. 이를 위해 AbortController를 사용해야 합니다.

AbortController 예제

const controller = new AbortController();

fetch('https://jsonplaceholder.typicode.com/posts', {
  signal: controller.signal,
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Error:', error);
    }
  });

// 요청 취소
controller.abort();

3. 브라우저 호환성:
   • Fetch는 최신 브라우저에서만 지원됩니다. 오래된 브라우저에서는 폴리필(polyfill)을 사용해야 할 수 있습니다.

---

Fetch API vs Axios

특징	Fetch API	Axios
Promise 기반	사용 가능	사용 가능
JSON 자동 변환	수동 변환 필요 (response.json())	자동 변환
요청 취소	AbortController 필요	기본적으로 제공
인터셉터	직접 구현 필요	기본 제공
지원 환경	브라우저 환경	브라우저와 Node.js 모두 지원

---

Fetch API 요약

• Fetch API는 HTTP 요청을 비동기적으로 처리하기 위한 표준 API입니다.
• Promise 기반으로 작성되었으며, then()과 async/await으로 쉽게 사용할 수 있습니다.
• 다소 기본적인 기능만 제공되므로, 요청 취소, 에러 처리, 인터셉터 등 고급 기능이 필요한 경우 Axios를 사용하는 것이 좋습니다.