13 API 호출과 데이터 가져오기: Fetch와 Axios를 활용한 API 요청과 로딩 상태 및 에러 핸들링

 API 호출은 웹 개발에서 매우 중요한 부분입니다. 다양한 데이터를 외부 서버에서 가져오거나 서버에 데이터를 전송할 때 API를 사용합니다. 이 글에서는 fetch와 Axios를 활용한 API 요청 방법과 함께 로딩 상태 처리, 에러 핸들링에 대해 설명하겠습니다. 초보자도 쉽게 이해할 수 있도록 구성하였으며, 실습을 통해 학습할 수 있도록 샘플 코드를 제공합니다.

1. fetch를 활용한 API 요청

fetch는 JavaScript에서 제공하는 내장 함수로, 서버에 HTTP 요청을 보내고 응답을 처리할 수 있습니다. 간단한 GET 요청을 통해 데이터를 가져오는 방법을 알아보겠습니다.

a. fetch 사용법

// GET 요청 예시
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    // 응답이 성공적으로 왔는지 확인
    if (!response.ok) {
      throw new Error('네트워크 응답에 문제가 있습니다.');
    }
    return response.json(); // 응답을 JSON 형식으로 파싱
  })
  .then(data => {
    console.log(data); // 받은 데이터 출력
  })
  .catch(error => {
    console.error('API 호출 중 에러 발생:', error);
  });

이 코드는 https://jsonplaceholder.typicode.com/posts에서 데이터를 가져와서 콘솔에 출력하는 간단한 예제입니다. fetch는 Promise를 반환하므로 then()과 catch()를 이용해 성공과 실패 처리를 할 수 있습니다.

b. 로딩 상태 처리

API 요청은 시간이 걸릴 수 있기 때문에, 사용자에게 로딩 상태를 표시하는 것이 좋습니다. 아래는 로딩 상태를 처리하는 방법입니다.

let isLoading = true;
let data = [];

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(responseData => {
    data = responseData;
    isLoading = false; // 데이터 로딩 완료
  })
  .catch(error => {
    console.error('API 호출 중 에러 발생:', error);
    isLoading = false; // 에러 발생 시에도 로딩 상태 변경
  });

// 로딩 상태를 UI에 반영
if (isLoading) {
  console.log('로딩 중...');
} else {
  console.log('데이터:', data);
}

위 코드에서 isLoading 변수를 이용하여 로딩 상태를 관리하고, 데이터가 로딩되었을 때 UI에 데이터를 표시할 수 있습니다.

2. Axios를 활용한 API 요청

Axios는 fetch보다 기능이 풍부한 HTTP 클라이언트로, 특히 에러 처리와 요청 취소, 인터셉터 기능 등이 잘 구현되어 있어 널리 사용됩니다. Axios를 이용한 API 요청 방법을 살펴보겠습니다.

a. Axios 사용법

import axios from 'axios';

// GET 요청 예시
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data); // 받은 데이터 출력
  })
  .catch(error => {
    console.error('API 호출 중 에러 발생:', error);
  });

Axios는 get() 메서드 외에도 post(), put(), delete() 등의 HTTP 메서드를 지원합니다. 위 코드에서는 get() 메서드를 사용하여 데이터를 가져왔습니다.

b. 로딩 상태 처리

Axios에서도 로딩 상태를 처리할 수 있습니다. 아래는 Axios를 사용한 로딩 상태 처리 예시입니다.

let isLoading = true;
let data = [];

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    data = response.data;
    isLoading = false; // 데이터 로딩 완료
  })
  .catch(error => {
    console.error('API 호출 중 에러 발생:', error);
    isLoading = false; // 에러 발생 시에도 로딩 상태 변경
  });

// 로딩 상태를 UI에 반영
if (isLoading) {
  console.log('로딩 중...');
} else {
  console.log('데이터:', data);
}

위 코드에서 isLoading을 관리하여 API 호출 중에는 "로딩 중..."을, 데이터가 로딩되면 해당 데이터를 출력합니다.

3. 에러 핸들링

API 요청 중에는 다양한 이유로 에러가 발생할 수 있습니다. 예를 들어, 서버가 다운되었거나, 요청한 URL이 잘못되었거나, 네트워크 문제 등이 있을 수 있습니다. fetch와 Axios 모두 에러 핸들링을 잘 할 수 있습니다.

a. fetch 에러 핸들링

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      throw new Error('잘못된 URL입니다.');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    console.error('에러 발생:', error.message); // 에러 메시지 출력
  });

fetch에서의 에러는 네트워크 오류나 잘못된 URL 등에서 발생할 수 있습니다. catch 구문을 통해 에러를 처리할 수 있습니다.

b. Axios 에러 핸들링

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 서버가 응답을 보냈지만 오류 상태 코드인 경우
      console.error('서버 오류:', error.response.status);
    } else if (error.request) {
      // 요청이 보내졌지만 응답을 받지 못한 경우
      console.error('응답을 받지 못했습니다.');
    } else {
      // 그 외의 에러
      console.error('API 호출 중 에러 발생:', error.message);
    }
  });

Axios는 response, request 등 다양한 에러 정보에 접근할 수 있어 보다 상세한 에러 처리가 가능합니다.

4. 결론

API 호출과 데이터 가져오는 과정에서 fetch와 Axios는 각각 장단점이 있습니다. fetch는 기본적으로 제공되는 API로 간단한 요청을 처리할 수 있고, Axios는 더 많은 기능을 제공하여 복잡한 요청을 처리하는 데 유용합니다. 또한, 로딩 상태와 에러 핸들링은 사용자 경험을 향상시키기 위해 꼭 필요한 부분입니다.

여러분도 이 두 가지 방법을 잘 활용하여 웹 애플리케이션에서 효율적인 API 요청을 구현해보세요.