웹 애플리케이션을 개발할 때, 서버에서 데이터를 비동기적으로 요청하여 가져와야 하는 경우가 많습니다. 이 때 fetch API를 사용하면 간편하게 데이터를 요청하고 응답을 처리할 수 있습니다.

fetch API란?

fetch API는 네트워크 요청을 생성하고 응답을 다룰 수 있는 JavaScript 인터페이스입니다. AJAX 요청을 보다 간단하게 만들어 줄 뿐만 아니라, Promise를 이용하여 작업을 처리하기 때문에 비동기 요청을 수행할 때 유용합니다.

fetch API를 사용한 데이터 요청

아래는 fetch API를 사용하여 서버에서 데이터를 요청하는 예제 코드입니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 오류: ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    // 요청에 성공하면 데이터를 처리함
    console.log(data);
  })
  .catch(error => {
    // 요청에 실패하면 오류를 처리함
    console.error('오류 발생: ', error);
  });

위 코드는 fetch API를 사용하여 “https://api.example.com/data” 주소로 GET 요청을 보내고, 응답을 JSON 형식으로 파싱합니다. 그 후 응답이 성공적으로 도착하면 데이터를 콘솔에 출력하고, 네트워크 오류가 발생하면 콘솔에 오류를 출력합니다.

결론

fetch API를 사용하면 간단하게 비동기 데이터 요청을 처리할 수 있습니다. 그러나 모든 브라우저가 fetch API를 지원하는 것은 아니므로, 호환성을 고려하여 다른 방법을 함께 고려해야 합니다.