fetch의 기본 사용법

fetch() 함수: 데이터 통신의 간편한 해결책

안녕하세요! 오늘은 웹 개발에서 자주 활용되는 fetch API에 대해 알아보려 합니다. fetch API는 JavaScript에서 서버와의 데이터 통신을 비동기적으로 처리하는 강력한 도구입니다. 간단한 몇 줄의 코드로 HTTP 요청을 보내고 응답을 처리할 수 있어, 웹 애플리케이션의 개발을 효율적으로 할 수 있게 해줍니다.

fetch의 기본 사용법

fetch 함수는 웹 리소스를 불러오기 위해 사용됩니다. 가장 간단한 형태로는 리소스의 URL을 fetch 함수에 전달하는 것으로 시작합니다. 예를 들어, JSON 형식의 데이터를 가져오는 코드를 살펴보겠습니다.

fetch('https://api.example.com/data')
  .then(response => response.json()) // JSON 데이터로 변환
  .then(data => console.log(data)); // 데이터 처리
위 코드는 'https://api.example.com/data' URL에서 데이터를 가져와서 JSON 형식으로 변환한 뒤 콘솔에 출력합니다. 이때 fetch 함수는 Promise 객체를 반환하며, 비동기적으로 네트워크 요청을 처리합니다.

만약 요청이 실패한다면, .catch를 사용하여 오류를 처리할 수 있습니다.

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

요청 옵션 설정

fetch 함수는 두 번째 인자로 옵션 객체를 받아서 다양한 설정을 할 수 있습니다. 이를 통해 HTTP 요청 메소드, 헤더, 요청 본문 등을 설정할 수 있습니다. 예를 들어, POST 방식으로 데이터를 보내는 코드를 살펴보겠습니다.

fetch('https://api.example.com/data', {
  method: 'POST', // HTTP 메소드 지정
  headers: {
    'Content-Type': 'application/json' // 콘텐츠 타입 설정
  },
  body: JSON.stringify({
    name: 'John',
    age: 30
  }) // 보낼 데이터
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

위 코드는 ‘https://api.example.com/data’ URL로 POST 요청을 보내는 예시입니다. 요청 헤더에 ‘Content-Type’을 설정하고, 요청 본문에 JSON 형식의 데이터를 전송합니다.

응답 처리 fetch 함수는 Response 객체를 반환합니다. 이 객체는 응답에 대한 정보와 함께 다양한 메서드를 제공합니다. 예를 들어, response.text()는 텍스트 형식으로 응답을 반환하고, response.blob()은 파일 데이터를 처리할 때 사용됩니다.

에러 핸들링

fetch 함수는 네트워크 요청이 실패할 경우에도 Promise를 resolve하지만, HTTP 상태 코드를 확인하여 요청이 성공했는지 여부를 판단해야 합니다. 만약 요청이 실패한다면 .catch를 사용하여 오류를 처리할 수 있습니다.

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

마무리 이상으로 fetch API의 기본적인 사용법을 살펴보았습니다. fetch를 활용하면 다양한 HTTP 요청을 간편하게 처리할 수 있어서, 웹 개발에 매우 유용한 도구입니다. 앞으로 다양한 활용 예제를 통해 더욱 깊이있게 이해해보도록 하겠습니다. 감사합니다!