JavaScript Fetch API 사용법: 데이터 가져오기와 처리

작성일 : 2024-08-04

JavaScript Fetch API 사용법: 데이터 가져오기와 처리

JavaScript에서 데이터를 가져오고 처리하는 작업은 웹 개발에서 핵심적인 부분입니다. Fetch API는 이러한 작업을 단순화하고, 비동기식으로 데이터를 처리할 수 있도록 도와줍니다. 이 글에서는 Fetch API의 기본 사용법부터 심화된 활용 방법까지 다룹니다.

Fetch API란 무엇인가?

Fetch API는 JavaScript에서 데이터를 네트워크를 통해 비동기적으로 가져오는 표준 방식을 제공합니다. 이는 과거에 많이 사용되던 XMLHttpRequest 객체보다 단순하고 가독성이 좋은 방식입니다. Fetch API는 프로미스(promise)를 사용하므로, 콜백 지옥(callback hell)을 피할 수 있는 장점이 있습니다.

기본 사용법

Fetch API의 기본 사용법은 매우 간단합니다. fetch 함수는 URL을 인자로 받아 데이터를 가져오는 작업을 수행합니다. 그 결과로 얻은 프로미스는 then과 catch 메서드를 체이닝하여 처리할 수 있습니다.


javascript
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

위 예제는 간단한 Fetch API 호출입니다. fetch 함수는 URL을 인자로 받아 서버에 요청을 보냅니다. 요청에 대한 응답(response)이 오면, 이를 JSON 형태로 변환하고, 변환된 데이터를 콘솔에 출력합니다. 만약 요청 중에 오류가 발생하면, catch 블록에서 오류를 처리합니다.

HTTP 메서드와 헤더 설정

기본적으로 fetch 함수는 GET 요청을 보냅니다. 그러나 다른 HTTP 메서드(POST, PUT, DELETE 등)를 사용하여 요청을 보낼 수도 있습니다. 이를 위해서는 두 번째 인자로 옵션 객체를 전달하면 됩니다.


javascript
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

여기서 중요한 점은 body 속성에 JSON 데이터를 문자열로 변환하여 전달하는 것입니다. 또한 headers 객체를 통해 요청 헤더를 설정할 수 있습니다.

에러 처리

네트워크 요청에서 발생할 수 있는 오류를 적절히 처리하는 것은 매우 중요합니다. fetch 함수는 네트워크 오류뿐만 아니라, HTTP 상태 코드가 200-299의 범위를 벗어날 때도 오류로 간주합니다.


javascript
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

response.ok 속성은 응답이 성공했는지를 나타냅니다. 성공적이지 않은 경우, 예외를 던져(throw) 오류를 처리할 수 있습니다.

비동기 함수와 Fetch API

비동기 함수(async function)와 await 키워드를 사용하면 Fetch API 호출을 보다 간결하게 작성할 수 있습니다. 이 방법은 프로미스 체이닝보다 가독성이 높고, 동기 코드와 유사하게 작동합니다.


javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.statusText);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

async 키워드를 함수 앞에 붙이면 해당 함수는 비동기 함수가 됩니다. await 키워드는 프로미스를 기다리게 하며, 프로미스가 해결되면 그 결과를 반환합니다. try...catch 블록을 사용하여 오류를 잡을 수 있습니다.

Fetch API의 고급 기능

Fetch API는 기본적인 요청과 응답 외에도 다양한 고급 기능을 제공합니다. 여기에서는 일부 유용한 기능들을 살펴보겠습니다.

요청 취소

Fetch API는 AbortController를 사용하여 요청을 취소할 수 있습니다. 이를 통해 사용자가 불필요한 네트워크 요청을 취소하는 기능을 구현할 수 있습니다.


javascript
const controller = new AbortController();
const signal = controller.signal;

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

// 요청을 취소하려면 다음 코드를 실행합니다.
controller.abort();

AbortController는 signal을 통해 fetch 요청과 연결되며, 요청을 취소할 때 controller.abort()를 호출하면 됩니다.

타임아웃 설정

Fetch API는 기본적으로 타임아웃 기능이 내장되어 있지 않습니다. 타임아웃 기능을 추가하려면, Promise.race를 사용하여 타임아웃 프로미스를 설정할 수 있습니다.


javascript
function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
}

fetchWithTimeout('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

위 예제는 5초의 타임아웃을 설정한 fetch 함수를 구현한 것입니다. 주어진 시간 내에 응답이 오지 않으면, 타임아웃 오류를 발생시킵니다.

결론

JavaScript Fetch API는 네트워크 요청을 다루는 강력한 도구입니다. 이 글에서는 Fetch API의 기본 사용법, HTTP 메서드와 헤더 설정, 에러 처리, 비동기 함수와의 결합, 그리고 고급 기능들에 대해 다루었습니다. Fetch API를 활용하여 더욱 효율적이고 읽기 쉬운 코드를 작성해 보세요.